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EDITOR'S NOTE 


As I write this, we’re about to embark on the 

biggest event of the net calendar: Generate 
London, now spread over two days, with the net 
awards closing the second day. net is now so much 
more than a magazine. We have run two conferences 
in London and two in New York, and the awards are 
now in their 16th year. 

It’s all closely linked. For example, we invited 
Lebanon-based frontend developer Sara Soueidan, 
who recently wrote a great feature about SVG for 
us (netm.ag/sara-273), to give a keynote at Generate 
— her first ever UK speaking appearance! It’s no 
surprise she was also crowned the net Developer of 
the Year. And many other winners (especially the 


new talent that we uncover) go on to write for the 
magazine and other publications, and often start on 
the speaking circuit, too. Don’t miss our coverage of 
Generate London and the net awards next month. 
As for this month’s issue, it’s got plenty of goodies: 
from our cover feature, which compares Photoshop 
with our App of the Year, Sketch, to O’Reilly’s 
64-page Web Performance Warrior report, which 
you can download for free. Just turn to page 98 
to find out how. 
Enjoy! 


Oliver Lindberg, editor 
oliver.lindberg@futurenet.com 
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CONFERENCE 
VIDEOS 

I’m looking to learn more 
about web design, especially 
content placement and page 
layout. I spend a fair amount 
of time on the road where 

I could listen to MP3s, and 
another option would be 
downloadable videos. Do 
you have any suggestions 

on where I could find such 
content? Are any of the big 
web industry conference 
events recorded? 

Glen Martin, Pennsylvania, US 
net: Of course! There are 
many good web design 
podcasts out there and 

you can find a selection 

to choose from at webby 
podcasts.co.uk. Many web 
design conferences also 
make videos of their talks, 
which are freely available 
after the event. We 
recommend you check out 
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our own Generate videos 
(generateconf.com/videos), 
the Five Simple Steps 
videos from events around 
the world (netm.ag/five-273) 
and the beyond tellerrand 
Vimeo channel (vimeo.com/ 
beyondtellerrand). That 
should keep you busy! 


v 

SUING GOOGLE 

Hey guys, I designed Gerty’s 
logo [appstafarian.com/gerty. 
html] and I want to sue Google. 
Could you help me? 
@l30n4rdoluis 

net: We passed this question 
on to Phil Gorski from 
Blacks Solicitors (lawblacks. 
com) who says: “A claim for 
copyright infringement in 
these sorts of circumstances 
will come down to whether 
or not you can persuade a 
court that copying actually 
took place. If a claim was to 
succeed you would need to 
show first of all that the 
logos were substantially 
similar (in the legal sense) 
and, secondly, that there 
was the possibility/ 
likelihood of Google seeing 
your logo and copying it 
during its design process. 
Google on the other hand 
would try to highlight the 
differences between the 
logos and provide evidence 
that its design was created 
independently of yours.” 


vy 

FRONTEND 
TOOLING STATS 

The results of the survey 

I was running on frontend 
tooling are now online if 

you guys are interested: 
netm.ag/tooling-273. 

Ashley Nolan, Wales, UK 

net: We certainly are! At the 
time of writing, Ashley had 
received 1044 responses for 
the survey and the results 
make interesting reading. 
For example, Sass was the 
preprocessor of choice for 
the majority of respondents 
with 66 per cent, and only 
13.5 per cent of those 
questioned said they used 
no preprocessing tool when 
authoring their CSS. In the 
battle of the task runners, 
gulp came out a fair distance 
ahead, with 46.7 per cent of 
respondents saying it was 


their favourite, compared 
with just 26.3 per cent going 
for Grunt. 


v 

DESIGN TRENDS 

I’ve been ‘designing in 

the browser’ for the last 
couple of days. Do I get 

a net award now? 

Andy Bell, Cheltenham, UK 
net: Nice try, Andy! We 
hope you’re enjoying your 
new process. If you want 

to read more about this 
topic, check out these 
posts: netm.ag/browser1-273, 
netm.ag/browser2-273, netm. 
ag/browser3-273. And if you 
want to find out who did 
manage to snag a coveted 
net award this year, head 
over to thenetawards.com 
and don’t miss our coverage 
from the ceremony next 
issue (#274). 
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YOUR AURAL DELIGHT 
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Listen in There are plenty of industry podcasts to help you learn new things when 
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THE POLL 


WHICH 1d YOUR FAVOURITE 


Affinity Designer 3% 


DESIGN TOOL? 


Pixate 3% 


The pro graphic 
design software 
rivalling Illustrator 


Marvel 4% — 
The go-to tool 
for designers 
ina hurry 


——_ae 
° 


Illustrator 12% — 
Another Adobe 
favourite in the line-up 


Sketch 27% — 
Photoshop's challenger 
gains momentum 


Making clever tech 


available to all 
Macaw 2% 

Said to speak the 
language of designers 
and developers 
Webflow 1% 

Still in its early days, 
Webflow takes some 
getting used to 
Photoshop 48% 
Seems like the old 
favourite still reigns 


supreme 


wW From our timeline 


c \ Set times for breaks and 
«®,*) ‘non work’ things ... and 
stick to them! 
@mbarker_84 


ALOT harder than it 
seems ... separate 


ws room, no children, 


LOUD MUSIC, preferably Slipknot 
(clears the house). Then FOCUS. 
@RonniePye 


| bought a shed. 


. | @garymarshall 


Na, Turn off Twitter ;) 


12 @de 


we | Noise cancelling 


headphones anda 
cushion for the cats to 


sleep on so they don’t annoy me. 


@emchi 
By not blocking them. 
Lf Sometimes they're 
essential to work, 
the key is to control them. 
@shmoops_ 


f y You only get distracted 
» 
fr if you want to be... even 
at work. Motivation is 
key - pick a moment when it hits. 
Location is secondary. 


@gunayg_ig 


_» A big pair of headphones 
sy and music always helps. 
Or exile — simply banish 
everyone and everything from 
existence. 
@coldfumonkeh 


\. Office door closed 
means ‘leave me to 
it’. | established good 
habits and routine many years 
ago, and my kids were brought 
up with them. 

@bseymour 


COOL STUFF 
WE LEARNED 
THIS MONTH 


SALESFORCE 
SPRUCES UP 
Salesforce, one of 
the biggest business 
enterprise apps on the 
market, revealed that 
it's rolling out a redesign 
based on its 2013 app. It 
will boast a customisable 
dashboard and simplified 
workflow, and users can 
schedule the introduction 
of the new design or toggle 
between layouts. 
netm.ag/salesforce-273 


SPEEDY SAFARI 
Frustrated by the 
number of ads and 

data-tracking scripts that 

slow down your mobile 
browsing? Your troubles 

might be over. In iOS 9, 

Apple will be introducing 

‘content blockers’: apps 

that will bar unwanted 

advertisements and 
trackers. Skimming data 
tracking tools is good for 

Apple, but could prove 

detrimental for publishers. 

netm.ag/block-273 


SOFTWARE PSYCHOLOGY 
It's time for software 
design to mature. 

People are more than 

users — they're building 

relationships with their 


tools, and negative 


experiences can have 
physical effects. Software 
with heart will take time to 
build, but it’s the next step 
in delivering a meaningful 
product relationship. 
netm.ag/psychology-273 
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THIS MONTH FEATURING... 
MICHELLE BARKER 


Michelle is a designer 
at Future Insights, with 
a passion for CSS 

w: michellebarker.co.uk 
t: @mbarker_84 


CAMERON MOLL 


Cameron is a designer, 
speaker, and the founder 
of Authentic Jobs 

w: cameronmoll.com 


, t: @cameronmoll 
BEN ALPERT 


Ben works at Facebook 
on React, an open-source 
JavaScript framework 

w: benalpertcom 

t: @soprano 


TOM PLATTEN-HIGGINS 


Tom creates games at 
Devon-based studio 
Mutant Labs 

w: tomph.com 


Ny t: @tomph 
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QUESTION OF THE MONTH 


How would you recommend displaying websites, 
beyond device screens and photograph mockups? 


Katherine Cory, Manchester, UK 


ofs 


Geograph 


18M 19M 


Showing off A portfolio piece from Ben Cline (netm.ag/cline-273), found on Behance with the ‘UI/UX’ filter 


TF: Keep in mind that no amount of lipstick will enhance poor work. Show your 
strongest work and leave prospects wanting to see a little more. I’d rather see three 
strong pieces in your portfolio, documented in detail, than 20 pieces ranging from 
great to mediocre. As for the presentation of your work, Behance and Dribbble are 
two of your best allies. Filter by ‘UI/UX’ or ‘Web Design’ on Behance, or tags such 
as ‘website’ on Dribbble. Within minutes you’ll have a slew of digital and analog 
treatments of web design work to influence how you show your work. 


HTML5 GAMES 

PITFALLS TO AVOID 

What’s your best piece of advice for 
anybody building a game right now? 
Robert Peters, Wiesbach, DE 

TP: Start small and have fun with it! 
What’s not to like about working in your 
bedroom for two years on a big idea and 


then making millions of dollars? Great 
ideas spawn lots of positive energy 

and most game concepts can be hashed 
out in 24 hours. If at that point the 

idea still feels right, you’re probably 

on to something! Go to game jams, 
meetups, collaborate and get people 

to play your games. 


In order The Flexbox Layout works by reordering child elements (flex items) within a parent container 


CSS LAYOUTS 
FLEXBOX AIMS 
I have a Flexbox issue. This is what I want: 
netm.ag/pen1-273, but without the hack 
with the margin ... 
Luigi Guevara, Uppsala, SE 
MB: There are a couple of ways you could 
build this layout in CSS [see images above]. 
Dudley Storey demonstrates how to use 
CSS multi-column layout here: netm.ag/ 
column-273. However, the items flow 
vertically, whereas it appears your items 
need to flow horizontally, with the fourth 
item sitting below the first. 

We can achieve something like this 
with Flexbox. Set your flex container 
to flex-direction: column . Then use the 
order property (netm.ag/order-273) to 
re-order your elements so they appear 
to flow horizontally (demo here: netm. 
ag/horizontal-273). 


Unlike the multi-column method, 
however, you need to put a fixed height 
on your containing element, otherwise 
the items will display in one long 
column. This still feels a bit hacky, and 
only really works with a fixed number 
of items. For a more flexible solution 
you could use Masonry. 


REACT 

REACT QUIRKS 

Any thoughts on some of the React quirks 
discussed in this post: netm.ag/weird-273° 
Paul Bunkham, Brighton, UK 

BA: Some of the quirks described (such 
as the <span> wrappers around each 
text node) are simply implementation 
details of the current React version. 
Fixing some of the other ‘quirks’ would 
require changes to JSX or React’s API, 
but we’re open to those too — there’s 


3 SIMPLE STEPS 


What is the best resource 
to start learning Flexbox? 


MB: There are some fantastic resources 
around. Of course, the best way is to start 
playing around yourself, but here are some 
top guides to get you up and running: 


WHAT THE FLEXBOX? 
This is a free, 20-part video course 
by developer Wes Bos (netm.ag/ 
what-273). \Wes does a great job of 
explaining the concepts of Flexbox in 
bitesized chunks. Perfect for whenever 
you have a few minutes to spare. 


CODROPS’ FLEXBOX REFERENCE 
This article by Sara Soueidan (netm. 
ag/codrops-273) is — like everything 
Sara writes — both comprehensive and 
easy to follow, explaining complex 
concepts well. 


FLEXBOX CHEATSHEET CHEATSHEET 
My absolute favourite is Joni 
Trythall’s Flexbox cheatsheet 

cheatsheet: netm.ag/cheat-273. It can 

be hard to remember all the various 

Flexbox properties, and this is the perfect 

‘at-a-glance’ guide. 
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p an active discussion within the issues of 


github.com/facebook/jsx. If you’re worried 
about any ‘weird parts’ in React, give ita 
try and see how it feels. Most people who 
try React aren’t bothered by the things 
mentioned in the post. 


PORTFOLIOS 

BRANCHING OUT? 

Should one focus on consistency with, 

or branch out to cover more ground? 
Simon Valev, Varna, BG 

CM: This is a difficult question. Everyone 
is different, as are their circumstances, 
passions and experiences. I’ve made a 
career out of challenging myself to do 
things I was totally unqualified for. This 
has led to a rather eclectic body of work 
in my portfolio, and I’m happy about 
that. But others specialise to the nth 
degree, such as Sergey Shapiro and his 
masterful calligraphy. That suits him, 
and I tip my hat to his brush. 

I believe mastery of creation and 
composition is usually much more 
important than mastery of tools. So 
work on whatever satisfies your creative 
itch, or whatever honourably pays the 
bills, or both, and you’re bound to have 
a respectable body of work. 


REACT 

WHY SPAS? 

Why should I use React? My focus is HTML, 
CSS and design. I don’t ‘get’ the need for 
single-page applications. 

Laurence Knutsen, London, UK 

BA: If you want a website of static pages 
that aren’t interactive, React probably 
won’t help you much. Most of React’s 
own site is built with plain HTML right 
now. But as soon as you start building out 


Carousel 


Interactive Dynamic components, like this image 
carousel, are at the heart of every modern site 
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interactivity in your pages — whether it’s 
a nav bar that opens when clicked or an 
entire dynamic app like Google Docs - 
tools like React become indispensible. 

It would be impossible to build something 
like Google Docs without making a 
single-page app, and those pages are 
where React really shines. 

But even if your pages are mostly 
static and reload entirely when 
navigating, you may want to build some 
reusable components in React, like an 
accordion or an image carousel. React 
excels at creating reusable components 
that can be built into larger pages: you 
can develop each React component in 
isolation and they won’t interfere when 
you put them together. 


HTML5 GAMES 

MEMORY MOANS 

I want to reduce memory usage/ 
processing power. What would you 
recommend Sprite sheets? 

Jack Bello, Texas, US 

TP: Reducing overheads will ultimately 
give your players a smoother, more 
enjoyable experience. Sprite sheets are 
a great way of minimising draw calls to 
the GPU — just make sure they are only 
loaded as and when you need them. 
Instead of having a single preloader, 
load relevant textures into memory 
before a level starts. 

Doing it this way will make sure 
your players aren’t waiting too long 
for your game to boot, and it will spread 
the CPU strain across smaller, bite-sized 
chunks. This is especially important 
on mobile devices, where memory is 
at a premium. 


PORTFOLIOS 

PORTFOLIO PITFALLS 

What are the classic pitfalls to avoid when 
creating an online portfolio? 

Jasmine Hosey, NC, US 

CM: Opinions vary widely on this point. 
Here’s mine: there really are no pitfalls, 
with the exception of failing to have an 
online portfolio. On occasion I read 
articles denouncing the use of things 
such as skill bars showing one’s 
proficiency in software tools or creative 
skills, saying they’re trite or misleading. 


2D games Yak Dash was built using Unity 


But guess what? As employer or potential 
client, sometimes I appreciate shortcuts 
— even skill bars — when evaluating a 
candidate, for instance if I’m thumbing 
through several portfolios in a sitting. 
So, I suppose I’m suggesting you ignore 
the cynics and do whatever works best 
for you, and you alone. 


HTML5 GAMES 

UNITY FOR 2D 

What are your thoughts on Unity 

for 2D games? Pros/cons? 

Nedeljko Sarié, Pacov, CZ 

TP: Yak Dash was the first proper 2D 
game I made with Unity and I have not 
looked back since. Being late to the 
party, I was initially very tentative about 
leaving my comfort zone of code and 
IDEs. You soon realise how much time is 
saved when you get to grips with Unity’s 
visual editor. No longer am I recompiling 
100 times to get my buttons to align 
perfectly! Cross-platform support and 
insane performance make Unity 

a brilliant option for 2D games. 


CSS LAYOUTS 

IN THE NEST 

Is nesting flexboxes a good idea? 

Mustafa Kurtuldu, London, UK 

AA: Definitely! Nesting allows you to 
take advantage of Flexbox features and 
build some really complex layouts. This 
cool tutorial (bit.ly/1ih52FG) uses nested 
flex containers to build a set of dice. Ican 
find very few downsides to nesting, the 
only exceptions being some issues in IE10 
and 11, which seem to relate to specific 
use cases, rather than being a problem 
overall. Just be sure to test your code in 
as many browsers as possible. 
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Product designer Steven Fabre explains 
how he created Easee to take the pain 
out of web animation 


te us 4 A ; i Vi 


A web designer faces a foul-mouthed 


client with an interesting understanding 


of the basics of doing business 


Rebecca Plumb gives a tour of Honey 
Agency’s buzzing workspace, with its 
vintage furniture and artistic flourishes 
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Web stuff we want this month, including 
an archive of parametric icons and a 
new prototyping app 


Exercise-phobe turned marathon man 
Patrick Fulton explains how he got into 
long-distance running 


Marc Thiele runs down the highlights and 
takeaways from the third (and not quite 
final) HybridConf event in Dublin 
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Easee isa 


web animation 


tool for designers. 


REGISTER FOR EARLY ACCESS 


No code required 


Smooth animation Export CSS 


EASEE 


Product designer Steven Fabre went back to 
basics to create this web animation tool 


le INFO 


job: Product designer, 


Campaign Monitor 
w: stevenfabre.com 


t: @stevenfabre 


SIDE PROJECT OF THE MONTH 


net: Tell us about Easee ... 

SF: Easee (easee.design) is a simple and intuitive 
web animation tool. It’s a graphics editor extension 
— just design in Sketch or Photoshop, then drag and 
drop your layers into Easee to animate them. You can 
share your work and export the generated CSS. 


net: What inspired you? 

SF: I was inspired by Ben and Dave, Campaign 
Monitor’s two founders. They started out in Ben’s 
dad’s basement and built a company with an amazing 
culture. I thought, what’s stopping me from building 
my own thing too and seeing how it goes? I now have 
thousands of people using my product. 


net: Where did you get the idea from? 

SF: There were a lot of prototyping tools out there, 
but they had too many features, required you to code, 
and tried to solve every problem. I decided to build 
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a ready-to-customise skeleton prototype to help 
other designers at Campaign Monitor create CSS 
animations. That eventually became Easee. 


net: Did you encounter any challenges? 

SF: Many! Firstly, technical challenges - ’ma 
designer and I had no idea how to build it. So I just 
got started, made tons of mistakes, read tutorials and 
constantly asked friends and colleagues for feedback. 
Secondly, personal challenges. It’s a big commitment 
to dedicate most nights and weekends to your own 
thing without knowing if it’s going to work. Talking 
to people was the best way to overcome this. 


net: What skills did you pick up? 

SF: I learnt more in the past six months working 
on Easee than] did in years at my day job. I learnt 
backend code and modular JavaScript. I learnt how 
to manage my time better. I learnt to compromise. 
I learnt about branding. I learned about marketing. 
The list goes on... 


net: Has the Easee project helped you in your 
everyday work? 

SF: It helped me spot and fix usability issues only 
customers would see, as Easee made me become 
a real customer of Campaign Monitor. 


Illustration: Ben the Illustrator huddleformation.prosite.com 


POTTY MOUTH 


Exclusively for net: the latest in a series 
of anonymous accounts of nightmare clients 


CLIENTS FROM HELL 


A few years ago, | was hired as aweb 
designer for a company that specialises 
in wooden furniture. Despite a clear, signed 
contract, three months of waiting and numerous 
reminders, | had still not been paid. Every time | 
contacted my client, he assured me my payment 
was coming soon, but that he had ‘difficulties’ 
that he needed to ‘iron out’ first. Eventually, 
my patience for his antics ran out. 


Client: You're always so impatient! Your money is 
coming. Can't you just give me a break? 

Me: Sir, this is at least the 10th time we've had 
this discussion. Starting next week, | will have to 
start compounding the late fees. If you still 
withhold payment, | will be forced to bring this 
to the small claims court. 

Client: What?! 

Me: According to our contract— 

Client: F**k you! You think you can f**k me over 
some technicalities?! I've been to business school! 
This is illegal! 

Me: Sir, the contract— 

Client: If that’s how you're going to treat a loyal 
client, I'm firing you. I'm done with your attitude! 


Me: Fine by me. But I still expect payment before— 


Client (yelling): Payment?! You're fired! 


Me: Once again, we have a contract— 

Client: F**k you! We'll take you to court over this! 
Me (fed up): Very well. | will sue you for non- 
payment, and you will have to pay my fees as 
well as court fees. | don’t see how that’s a good 
business decision, but | haven't been to business 
school. 

Client: My lawyer will crush you! 

Me: There are no lawyers in small claims court. 
Client (brief silence): F**K YOU! 


Three days later, | receive a phone call from my 
client's boss. 


Client's Boss: Look, I'm very sorry this escalated 
like this. Please don’t sue us. I've terminated 
[Client]'s contract. 

Me: I’m sorry too, but he really left me no choice. 
Client's Boss: So... Since he hired you, and | fired 
him ... | don’t need to pay you, right? 


He was dismayed when | informed him that | still 
required payment. 


CLIENTS: - 


clientsfromhell.net 


BY 


COMMUNICATE WITH 


REMOTE WORKERS 


It can be tricky to keep in touch 
when you aren't all in one office. 
How do our followers cope? 


SLACK 
Slack is by far the most popular 
way of communicating amongst 
our followers, often coupled with 
Skype. @psdesignuk turned to 
Slack thanks to its “easiness and 
great user experience”. 


TRELLO 
For project tracking, Trello took 
the crown. @TerminallyWill 
suggests “Trello is great for task- 
based comms and Slack is great 
for discussion-based comms. 
We also integrate the two for 
perfect harmony.” 
@fruitbowlmedia agrees that 
Trello is ideal for sharing data with 
clients as well as colleagues. 


PAPER TRAIL 
Video calls are great, but it’s worth 
getting it in writing to ensure 
nothing is missed, says 
@RichardCarter: “Always include a 
followup email with an actionable 
list of responsibilities and 
deadlines”. 


ALTERNATIVE APPROACH 
@Aquatium suggests Zoom 
for video meetings and JIRA for 
task reviews. @LucPestille also 
added some new methods to the 
list: “Slack, Google Hangouts, 
email, third person Chinese 
whispers, carrier pigeon, note 
on a brick through their window. 
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SWEET AS HONEY 


Rebecca Plumb gives a tour of the vintage furniture and 
artistic flourishes in Honey Agency’s workspace 


WORKSPACE 


I believe creativity is strongly 

linked to one’s environment 
— an energising space will bring 
better ideas. As Honey Agency’s 
creative director, good ideas are 
my job. In April, we relocated to 
the MARRS building, a former 
storage warehouse that has been 
transformed into a vibrant mix of 
shops, restaurants and office space 
in Sacramento, California. 

We were drawn to the location, 
then we fell in love with the open 
ceilings, natural light from the 
huge windows and the open floor 
plan, which has made us more 
collaborative than our previous, 
more traditional office. The bars 
and restaurants downstairs become 
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additional meeting spaces to 
work or relax. 

When Meghan Phillips and 
I launched Honey in 2009, we 
built the agency on equal parts 
marketing (her expertise) and 
design (mine), creating a name for 
ourselves in the food and beverage 
industries. Since then we have 
grown our team to nine, providing 
clients branding, advertising and 
digital experiences while utilising 
our Hex Method. 

We don’t credit the pachira (1) 
(money tree) for our success, but 
we might be a little superstitious 
about it. It was given to us when 
we opened and has grown from 
a small plant to an actual tree. 


Ihave a lifetime love of interior 
design, so while on maternity 
leave last winter I was able to focus 
on ‘Honeyfying’ this raw space so 
it truly felt like us. We installed 
café lights (2) to make the open 
ceiling feel cheery, and warm up 
the industrial bones. We rescued 
my nana’s 1950s french provincial 
furniture from storage, and had it 
recovered to become the focal 
point of The Buzzworthy Lounge. 
The hot pink sofa (3) greets clients 
when they arrive, but is also the 
perfect place for happy hour 
cocktails with the team. 

One of the more unique aspects 
has to be the handpainted walls (4) 
in the Lounge and conference 
room. Painted by a local muralist, 
we were able to get the exact look 
we wanted, including gold and 
silver metallic accents. 


Rebecca is co-owner and creative 
director of Honey Agency 
(honeyagency.com). Follow the hive 
on Instagram @thehoneyagency 
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Small objects of web design wonder: from an updated 
guide to CSS rules, to an archive of parametric icons 


A fast read to 


Using build 


tools 


by Gavin Davies 


USING BUILD TOOLS £2.50 PRINCIPLE $99 WAKE $12/PM 


OREILLY 


FUTURAMO VARIOUS CSS: THE MISSING MANUAL $39.99 FLINTO $99 
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* Subject to exchange rate differences. Namecheap charges clients in USD. 


Find out more at www.namecheap.com/easyas123 
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ING namecheap 


Put your name on the city you love! 
Eye-catching .LONDON domain names, priced right 


-LONDON names at £15* 


Great, short, memorable names: Available. 
A localised brand presence: Yes, please! 


Better SEO results for your site: Done. 


Award-winning Namecheap customer service: Indeed. 
More love from Londoners: Guaranteed! 


HANNAH DONOVAN 


hannahdonovan.com 


OFFICE LENS 
An app with a boring name, 
made by Microsoft. | know — 
whaaaa? But hold up, because 
this thing is so good for taking 
pics of whiteboards, you'll 
never go back. If you do a lot 
of collaborative product 
strategy/sketching, 
this is for you. 
netm.ag/lens-273 


NOTES 
Tools don't have to be 

fancy, it’s all in how you use 
them. Notes on my iPhone 
has four lists: Hustle, Life, 
Ideas, Recommendations. | 
live by these four. | also use 
Notes for a lot of longform 
writing in snatches of time. 
Most of my talks have been 

written in Notes and I’m 

currently sketching out a 


POCKET 
If you haven't guessed by 
now, my phone is my go-to. 
Pocket elegantly solves the 
read-later/offline problem. 
| send articles to Pocket and 
stay abreast of the industry 
on the J/Z train or while 
traveling. No internet? 
No problem! 
getpocket.com 
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MARATHON RUNNING 


This month ... web developer and former exercise-phobe 
Patrick Fulton explains how he embraced running 


>» One late-autumn night in 2001, | put on way 
too much ill-fitting, heavy, dark clothing 
and decided to go for a ‘run’ on the back streets of 
my neighbourhood. Being an overweight kid and 
teen, | had never known what it was like to work 
out, and | certainly wasn't one to lace up a pair of 
shoes and jog in public. But | had grown sick and 
tired of feeling sick, tired and unhappy with my 
body — so | had to start somewhere. 

What happened next was predictable: | ran 
as hard and as fast as | could, and | only made it 
a few blocks before | was completely winded and 
dripping with sweat. | felt like such a beginner 
— but also like | was doing something to make an 
improvement in my life. So for the next several 
weeks, | faithfully put on my gear and went 
running every night. | managed to turn those 
runs into a routine, and | looked at my small 
gains as an incentive to continue running. 

In May of this year, | completed my fifth 
marathon. My goals for running now are simple: 
first and foremost, finish. Secondly, finish strong. 
And third, finish without injury. Everything else 
is abonus. 

I'll be the first to say that | never imagined 
myself as a runner, least of all someone who 
regularly runs marathons. When | talk with 
people about running, | hear some very quick 
responses: “| didn’t even drive 18 miles today, 


and you did that for a training run?” | always reply 
by saying that any run is an accomplishment. 
There are plenty of people who do not have the 
chance to run for leisure, and I’m lucky to have 
the opportunity to do this. 

Running has become meditative for me. On 
shorter runs, | keep things very low-tech, often 
leaving everything behind except my house keys. 
On longer runs, | carry my mobile, but reserve it 
for emergencies. Instead, | load up my trusty iPod 
Shuffle (that | won at a web developer meetup in 
2008) with music or podcasts, and enjoy the few 
hours of alone time. 

I've also discovered that my running journey 
has paralleled my career as a web developer. 
When | first started writing code, | had no idea 
what | was doing, frequently felt out of place and 
exhausted, and often thought that | would never 
progress. But, running and web development 
have both taught me that so many things in life 
aren't sprints, they’re marathons, and when 
you're in the thick of things, it’s not easy to think 
with that long view. 


Patrick (@patrickfulton) is a 
=! runner, former punk rock kid, 
dog owner and web developer at 
* Bearded in Pittsburgh's historic 
web design district 


Photography: Marc Thiele 


HYBRIDCONE 


At the third HybridConf in Dublin, talks ranged from 
motivational to practical. Marc Thiele was there 


DATE: 20-21 AUGUST 2015 
LOCATION: DUBLIN, IRELAND 
URL: hybridconf.net 


> HybridConf is known for its mixed lineup 

and diverse topics, and the third edition in 
Dublin promised exactly that. At the time, founders 
Zach Inglis and Laura Sanders had announced it 
would be the final outing for the event. 

Mr Bingo opened the show by sharing the story 
of his latest Kickstarter campaign: a rap video, 
which attracted 400 per cent funding. Des Traynor 
followed with a comprehensive discussion of 
product design, offering useful insights into the 
planning and building process. He underlined the 
importance of focusing on core features instead of 
making your product feature-rich and bulky. 

A highlight of the day was Bastian Allgeier’s 
session about the mistakes he made with Zootool, 
and how these errors helped him when creating 
Kirby, his file-based CMS. The session also showed 
some of Traynor’s earlier advice (particularly that 
on core features) in action. 

The first day was closed by Dr Ayanna Howard, 
who demonstrated that robots already are a big 
part of our lives. But instead of robotic systems 
from industrial domains, she showed how 


intelligent robotics for real world applications 
in health and in your home can help improve 
the quality of your daily life. 

Allison House opened day two witha 
motivational talk about learning new skills and 
having no excuses for not starting from scratch 
occasionally. Chris Murphy encouraged attendees 
to go deeper into the things we're doing and using. 
He argued that we often use software and accept 
opinions without asking ‘why’, which is vital if we 
are to actually understand things. 

Kai Brach showed pitfalls as well as the benefits 
of running an indie business, and Aaron Draplin 
closed the day perfectly with a talk that led the 
audience through his amazing design career. 

The days were spiced up with five-minute ‘pocket 
talks’, which kept the flow snappy. Inglis spent the 
event dodging questions about if it really would be 
the last ever HybridConf, and it has since been 
revealed that it will indeed return. It’s not easy to 
stop doing, what you love, is it? in| 


Marc (marcthiele.com) 
is a designer, event organiser 
and author from Germany. He 
*K started the beyond tellerrand 
a conference in 2010 
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INTERACT 
DATE: 20-21 OCT 
LOCATION: LONDON, UK 
This conference has attracted 
leading authorities in user 
experience, research and digital 
design. Vanessa Kirby and Oliver 
Blank will take a techy and 
scientific delve into the 
neurology and psychology of 
digital, as they believe a truly 
engaging experience must come 
from beyond the screen. 
2015.interactconf.com 


KEEP RUBY WEIRD 
DATE: 23 OCT 
LOCATION: AUSTIN, TX 
This Texas event boasts a lineup 
of Ruby masters including Sandi 
Metz and Patrick McKenzie, with 
Aaron Patterson to MC. The 
conference organisers have also 
promised sandwiches. 
keeprubyweird.com 


BEYOND TELLERRAND 
DATE: 2-4 NOV 
LOCATION: BERLIN, GERMANY 
It's the mighty tellerrand’s 
second year in Berlin. The 
schedule includes talks on 
mobile accessibility from Marcy 
Sutton, ‘the hidden plot device’ 
from Steph Troeth, and the 
physical web from Scott Jenson. 
netm.ag/tellerrand-273 


FFCONF 
DATE: 6 NOV 
LOCATION: BRIGHTON, UK 
Previously known as Full 
Frontal, this event gathers the 
brightest and best of the web 
to explore issues surrounding 
frontend developers. It's so 
good (and affordable) that 
this year's event has officially 
sold out already. 
2015.ffconf.org 
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RESPONSIVE CONTENT MODELLING 28 
Steve Fisher walks through the process 


of prioritising your site’s content so it can 
live on any device 


INTERVIEW 

Creativity evangelist, author and speaker 
Denise Jacobs explains why helping others 
discover their inner creativity is her calling 


Q&A 41 
We chat to UX expert Heydon Pickering about 
the secret to great interfaces, and why writing 
is the best way of learning 


INVISIBLE 


DESIGN SKILLS 


Christopher Barr explains how 


mindfulness and thoughtful 


management can help foster a 


healthy design environment 


There are many techniques you learn 

as a designer to improve your work. 
But what skills build a better design 
environment? These invisible skills (as 
I call them) are not something you’re 
formally taught. Your art director may 
teach you how to present your work, but I 
am sure no one will sit down and tell you 
how to create good relationships with 
your stakeholders, developers, marketers 
and anyone else in your feedback loop. 

In order to promote these types of 
relationships in my teams, I’ve taken 
inspiration from meditation and philoso- 
phy to generate my desired design dynamic. 
I follow these principals every day. 


MINDFULNESS 
We all need to be mindful of others 
throughout the day. In meditation, mind- 
fulness is a practice used to focus your 


attention on a physical sensation, like 
your breathing. Even if you don’t practice 
meditation, you can learn to use this tech- 
nique in your everyday communication. 
Next time you’re in a meeting, notice when 
you’ve stopped listening and refocus your 
attention on the speaker. 

Listening may sound obvious, but when 
you pay attention, you might realise your 
mind has wandered away, thinking about 
the project. You could find yourself getting 
angry with the critique, turning thoughts 
into defences. If you’re not listening, 
you’re robbing yourself of the ability to ask 
intelligent questions. 

When your attention is distracted, you 
lose the speaker’s train of thought. 
Distracted designers tend to ask repeat 
questions, or fail to consume the informa- 
tion at all. Give whoever is speaking the 
respect of listening and they’ll pay the 
same mindfulness back to you. 


TEAM CREATIVITY 

Get your stakeholders sketching. Why? 
Words sometimes get the point across, but 
everyone can react to a design. Getting your 
team up and drawing breaks the language 
barrier and makes everyone an active par- 
ticipant. Encourage your team to put pen 
to paper and start sketching. 

Make rudimentary doodles, and get the 
non-designers comfortable and active in 
the creative process. Start drawing early 
and often throughout your project. Even 
copywriters can provide typed out headline 
layout solutions. 

Bringing your whole team together to 
collaborate on the design brings a sense 
of ownership over your project, which 
leads to better work from everyone. An 
unattached engineer isn’t compelled to 
deliver precisely engineered designs like a 
highly engaged engineer is. The same goes 
for anyone involved in your project. 


DESIGN KING 
The philosopher Confucius said, “The 
king’s mind is the wind, and grass are the 
minds of the people: whither the wind 

blows, thither the grass bends.” 
Let’s replace ‘king’ with ‘designer’ and 
imagine ‘the people’ are your colleagues 
and stakeholders. A virtuous designer will 


It takes many to build a product. 


Not your idea? Not a problem. Being able 


to recognise a great idea is smarter 


than needing it to be your idea 


own up to mistakes, give others cred- 
it, share lots of ideas and maintain an 
inclusive design process. In return, your 
colleagues will bend with you and give you 
the same respect. 

If you rule as a dictator, closing your 
design process to new ideas, your 
colleagues will stick to their opinions and 
shut down yours. A successful Design King 
knows it takes many to build a product. 
Not your idea? Not a problem. Being able to 
recognise a great idea is smarter than 
needing it to be your idea. 

Design Kings listen to everyone, 
encourage feedback, and speak for the 
user, but they also know that taking 
critique verbatim is not wise. You must 
consider the consequences of every edit in 
the role of your design system. 


Yes, make edits, but don’t make edits 
just because so-and-so said so. Instead, 
develop a better solution to the problems. 
Trim copy, reorder the page, animate, and 
so on, to improve your design. Make design 
your solution to your problems. 

An open design environment will make 
presenting ideas and creating great work 
easier on your team. Getting great design 
out the door means not going at it alone. 
These principals are about creating an 
environment in which design can thrive. 
A little mindfulness, encouragement and 
attention to your team can contribute to 
creating that environment. MI 


Christopher (@CBARRRR ) is a senior product 
designer focused on mobile and emerging 
interfaces (CBARRRR.com) 
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RESPONSIVE CONTENT 


MODELLING 


Illustration by Ben Mounsey 


Steve Fisher takes a look at how to nail down the core 
piece of content around which your whole site orbits 


Without content, a website is a black hole. Finding 
that core piece of content from which all the rest 
of the pages and elements hang saves us from being 
sucked into the black hole of building fancy buckets to 
hold Lorem Ipsum. Finding the core content of your 
website means the entire team (vendors, stakeholders, 
audiences) will walk away with a common understand- 
ing and vision. Every time you write or revise, you'll think 
about that core piece of content and refocus. The content 
authoring experience will become what it was always 
meant to be: dreamy. 
To find this core content, we use something called 
a content modelling workshop. In this article, ?ll takea 
closer look at our process. 


TEAM TALK 

First off, you need people in the room who have the right 
passion and information. A team might include a UX 
lead, content strategist, developer, client project sponsor, 
client IT lead and client content specialist. You may not 
have all these specialists for every project, but there are 
probably people with these general responsibilities 
in their job descriptions. The goal is to involve people 
who understand the problem, are passionate about 
solving it, and have the authority to make decisions. 

Responsive content modelling is a team-building 
exercise, but with fewer trust falls and more Post-It notes. 
Trust is crucial; everyone needs to feel safe to speak 
freely. For this, getting everyone together is key. This 


means being locked ina room together for anything from 
acouple of days to the better part of a week. Take breaks 
as a group, and get lunch delivered. 


BE PREPARED 
In preparation for your workshop, you need to inven- 
tory everything you currently have. You have to know 
what exists to know its purpose and to see patterns. 

Next you need to set some high-level goals for the site. 
So you don’t fall into the trap of letting opinions guide 
your decisions, it’s important you know your audience 
and its needs. If you don’t know who you’re talking to, 
it’s pretty damn hard to write for them. 

You then need to work out the UX vision. Fire off a 
quick draft to get it out there and ensure it is pointing 
the group towards the right target. Finally, establish the 
project’s design principles. These are the guideposts for 
all decision-making during the project. They’re the values 
or ‘why’ statements that will keep you moving towards 
the vision. Think of them as the guiding principles of 
the project. 

Nailing down the ‘who, why and what’ is crucial. You 
need to know your purpose because you can’t know what 
your central content type is without knowing who you’re 
communicating with and why. 


CONTENT TEMPLATES 
With this framework established, you can dig into the 
content modelling phase of your workshop. You’re going 
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to prioritise every content type. Here you look at all the 
content views you’ll need: the homepage, landing page, 
standard content page, news releases, application tem- 
plates, advanced search and so on. Often there will be 
an established list, based on an earlier contract. 

You want to begin to prioritise all these content views 
by comparing content templates with the vision and 
goals. You need to consider questions like: Where will 
the content live? Where will the most important content 
to the primary audiences be found? Will it live on the 
homepage or a landing page? Is this a page where search 
is dominant? 

In this phase, you must agree on everything; no 
compromise. This is a must. Focus on audience needs 
and toss opinions aside. This is the secret to delighting 
audiences and giving them what they need. It will be 
important to know how to argue well and speak your 
mind, so you need a strong facilitator. This can be anyone 
who understands a project’s process and purpose. The 
best facilitators are often the experience architect or the 
content strategist. 


If you start to label items with a four, they’re probably 
pointless. Everything should point people towards the 
core purpose of this content. Some priority three 
elements might reveal themselves as necessary and 
some priority ones could get demoted. Things will shift 
as the team progresses. 


NARROWING DOWN 

You’re not done yet! Now you go back through the three 
priority groups and assign a priority order to each element 
within each group. Be prepared to duke it out, laugh, cry, 
and sweat through this. It’s not about compromise, it’s 
about focusing on what’s best for the audience. This is 
why you established a framework through our UX vision, 
design principles and high-level goals. Return to those 
guideposts for every decision. 

Something must be the very first priority and some- 
thing must be the last. Take it seriously and resist the 
urge to quit - I promise it will be worth it. This is a less 
technical, but more human-centred method of content 
modelling. When you’re done, every content type will 


In a multi-device world, content should adapt to all 


platforms and be represented consistently. You can do this 


by making sure that your core content type is the first 
thing users see on any device 


Remember, there is no such thing as the client team 
and the vendor team: there is only the project team. You 
can’t successfully find that thing that bonds the team 
and the content by working separately. 


LOOKING FOR THE CORE 

Go you! You found and prioritised the core content 
templates. Now you need to get more granular and find 
the unique content type everything orbits around. To do 
this, you list the discrete content types of your content 
templates: page title, contact module, featured image, 
teaser copy, main body copy, related items, and so on. 
At this point, this may include items that you’re not sure 
you want included. We’ll sort these out later. 

Attach a priority level of one, two, or three to each 
content type or item on the list: 


@ 1- Essential: This view wouldn’t be able to function 
or communicate the core message without this item 

@ 2 - Great to have: These items fully support the core 
purpose of this view 

@ 3 —- Nice to have: If these items didn’t exist it wouldn’t 
have a huge impact on the view 


30 net november 2015 


have a unique priority, and content type 1-1 is the most 
important. This is your core content type. 


PRIORITY 1-1 
Ina multi-device world where content can live anywhere, 
this is one of the most important things you can do to 
make your content successful. Content should adapt to 
all platforms and be represented consistently. You can 
do this by making sure that priority 1-1 content is the 
first thing users see on any device. 

Regardless of content being accessed on a Pebble watch 
or a billboard, the key message remains clear. And for 
the 90 per cent of people who juggle between devices, 
they’re seeing the congruence of the content. 

Finding the core piece of content really is the key to 
every web project, big or small. It will make your projects 
more successful and help you build a better, more 
thoughtful web, one content type at atime. M 


Steve is the founder at The Republic of Quality 
(republicofquality.com) and the co-founder 

of The Design & Content Conference 
(designcontentconf:com) 
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DENISE JACOBS 


Words by Sammy Maine Photography by Scott Redinger-Libolt 


The creativity evangelist tells all 
about banishing her inner critic, 
travelling the world and why 
creativity is in our DNA 
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INFO 

job: Speaker, author and 
creativity evangelist 

w: denisejacobs.com 

t: @denisejacobs 
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Forget nightmare clients and fire- 

breathing bosses, when it comes to 
creativity, there’s no scarier critic than your- 
self. Denise Jacobs was all too familiar with 
that inner-detractor, only to overcome it 
during her time working on her 2010 release 
The CSS Detective Guide. 

“1 finally had a moment when I was doing 
the site for the book where I was basically 
doing criticism-free creating,” Jacobs recalls. 
“And it was the most amazing feeling; [can’t 
begin to tell you how amazing it feels.” Eager 
to share the benefits of her discovery, Jacobs 
decided to become a creativity evangelist, 
sharing her process with others. 

“This is the reason I started doing web 
design, why make anything,” she enthuses. 
“It’s a feeling that I want other people to feel. 
Iwant them to feel this criticism-free creative 
process. I thought ifI could help other people 
feel like this more often than not, then that’s 
what I want to do with my life.” 

Having started off in the industry as a CSS 
specialist, Jacobs’ epiphany understandably 
took a little while to gain momentum. In- 
spired by Aarron Walter’s transition from 
findability expert to emotional design 
guru, Jacobs began to shift her speaking 
topics to fit into her new way of thinking. 

“The irony is that my creativity talks 
seemed to resonate with people more than 
the CSS stuff,” she recalls. “At the Oredev 
developer conference in Sweden, I gave my 
‘Art of Disciplined Creativity’ talk, and the 
room was packed: people were lined up 
against the walls and sitting in the aisles. The 
CSS talk I did there had a good number of 
people, but nothing like the creativity talk. 
And that’s when I thought ‘this is what I’m 
supposed to be doing!” 

And she did. In 2014 she founded creativ- 
ity and innovation collective The Creative 
Dose (thecreativedose.com), and now spends 
her time delivering talks and training to 
teams across the world, teaching methods to 
generate ideas through creative collaboration, 
improve communication, and to promote 
sustainable productivity. 


AWESOME SCIENCE 
But banishing your inner critic is easier said 
than done; it takes patience and hard work. 
The key to success, according to Jacobs, is to 
figure out where this criticism stems from 
and more importantly, what triggers it. 


_ 


“Does it show up as compulsive busyness, 
does it show up as perfectionism or 
procrastination, or both?” she asks. “It really 
helps people anatomise their inner critic and 
then give techniques, especially for perfec- 
tionism and procrastination because I think 
that’s what affects people the most. It’s so 
you can get to the point where you’re actu- 
ally creating something without your inner 
critic yapping in your ear the whole time and 
bogging the process down.” 

When asked whether the more 
traditional web professionals can stomach 
her somewhat philosophical approach to 
working, she says it’s all down to making 
it as technical as possi- 


state by controlling your brain. Much like 
running a marathon, she says everyone has 
the capacity to reach this state, it’s all 
a matter of the right training. You teach 
yourself to be more creative by instilling a 
certain set of practices. 

While this training is a solo endeavour, 
Jacobs recognises the importance of human 
interaction. “Some of the most creative 
times are when you’re interacting with 
people and you’re sharing ideas - you’re al- 
lowing yourself to be influenced by others,” 
she explains. “I really like to talk about 
creative collaboration and the innovation 
that comes from that.” 


ble, putting it in a ‘Mon’t play MAKE THE 
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the comfort zone of her small Just because Although being a creativ- 
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very easy for people to thinks you re incredibly passionate 

dismiss what I’m talking about diversity in the web 

about if they thought it supposed to industry. She’s the 


was too ‘airy fairy’ and 


play small” 


founder of Rawk the 


having to deal with your 
feelings, stuff like that,” she considers. 
“But when you start talking about the 
neuroscience of creativity and you explain 
how your brain actually goes into a different 
state when you’re being creative, people start 
to realise that it’s something we’re wired to 
do. Besides, everybody loves science. Science 
is awesome.” 
When it comes to training others, Jacobs 
takes her inspiration from the approach of 
Buddhist monks: reaching a meditative 


Web (rawktheweb.com), 
and initiative that aims to provide resourc- 
es and inspiration to increase the numbers, 
and visibility, of minorities in the tech 
industry. But, as Jacobs explains, the onus 
is not solely on people of colour and 
women to make the change. 

“Everybody needs to play their part and 
everyone benefits from it,” she urges. “The 
more diversity you have, the more innova- 
tion you have and the better chance you 
have to have better products and services 


on the market. Diversity is actually a com- 
petitive advantage.” 

“If you need someone to mentor you, to 
hold your hand, whatever, get that and go! 
Don’t play small because somebody else 
thinks you’re supposed to play small. I think 
the thing is that on a philosophical level, 
we only have a certain amount of time 
on the planet, and we actually don’t know 
what amount of time that is. Dilly-dallying 
with little stuff when you want something 
bigger is a waste of time. It’s a revolution but 
also an evolution.” 


TRANSFORMATION 

You could say that Jacobs is in the business 
of transforming lives. As well as mentoring 
others through Rawk the Web, she’s also 
launched an initiative dedicated to leverag- 
ing the power of creativity to transform lives 
and communities: Creativity (R)Evolution 
(creativityrevolution.com). 

She says the effects of creativity itself 
have the power to ripple out beyond the 
confines of everyday life. “When we do 
something creative, it’s transformative. It 
wakes us up, it energises us, rejuvenates us 
and feed our souls,” she enthuses. 

“Creativity is a necessity. It’s something 
we’re born with naturally as children and 
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p it gets kicked out of us. It allows people to 


get permission to experience more joy and 
to do more work that is satisfying and really 
feeds their souls,” she continues. “Once you 
start doing that more, it gives other people 
permission to do that, and then it kind of 
spreads around and really changes things. 
Design changes things.” 


ON THE ROAD 

When we conduct the interview, Jacobs 
has just returned from an intensive speaking 
tour — something which, due to her growing 
popularity, seems to be a fairly common 
occurance these days. “It is starting to feel 
like a lot of travel,” she admits. “I am 
actually getting to the point where I’m 
feeling a little... won’t say burnt out per se, 
but definitely road-weary.” 

When asked how she keeps up the 
enthusiasm through this demanding 
schedule, she says it’s simply the thought of 
others discovering the positive effects of her 
creative approach. 

“T get to the event and once I’m about to 
go on, Iam so excited about sharing this 
content with people, and I’m so excited 
about being able to spark ideas, to touch 
people, to inspire people, motivate people. 
To turn them on to something they hadn’t 
thought about or remind them of something 
they already knew but forgot. That really 
feeds me,” she smiles. 

Whilst time spent on the road is usually 
made up of speaking events, workshops and 
consulting engagements, earlier this year 
Jacobs found time to travel to South Africa, 
Zimbabwe and Zambia. “It was this great 
opportunity to go out and do something new 
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and reconnect with my chosen family,” she 
says. The trip also helped her get away from 
it all, something she considers incredibly 
important to creating great work. 

But what also struck Jacobs was the lack 
of creativity in these places — a realisation 
that surprised her, given the reputation for 


handmade products many 


which focuses on the neuroscience of crea- 
tivity. Then there’s The Creativity Imperative, 
and that is kind of an executive-level type 
of book that talks about the how creativity 
relates toa company’s bottom line,” she lists. 
“The last one is The Brain Unchained, which 
Pll be turning into an illustrated story.” 
Whilst this impressive 
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As we continue to talk, it becomes clear that 
Jacobs isn’t a person who does things by 
halves. Her latest book, Banish Your Inner 
Critic, is due to be released in the first half of 
2016, and her timetable for the rest of the 
year is already filling up. 

As well as her hectic speaking schedule 
and taking charge of three different 
initiatives, by the end of 2016, Jacobs hopes 
to have released three more books. “One of 
them is called Hacking the Creative Brain, 


book is my book. I got the deal. lam supposed 
to do this, so buck up’,” she admits. 

Her parting advice? “Fire your inner critic, 
get rid of the evil voices in your head. It’s 
about being inspired, being clear, telling 
everyone what you want to do and taking 
advantage of opportunities when they 
present themselves.” 


Watch Denise Jacobs’ Creativity’ talk 
from Generate 2014: netm.ag/jacobs-273 
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USER EXPERIENCE 


DESIGNING 


HEALTH APPS 


Katarzyna Stawarz explores the features of 
apps that help people develop healthy habits 


E Have you ever used a smartphone 
app to track what you eat, count steps 
or start a new habit? Hundreds of apps 
that promise to make us healthier are a 
few taps away. They let us set goals and 
track our behaviour with the hope that 
this will lead to a long-term change. 
Unfortunately it is not that simple. 

Behaviour change starts when we real- 
ise we need to change. Self-tracking apps 
can help here: they are great at telling 
us how we are doing (e.g. how active we 
already are). Next, we need to take action. 
Looking at summaries can help, but this 
step relies on one’s own motivation, which 
can’t always be supported by technology. 

Once the intention turns into action, we 
must repeat the behaviour until it becomes 
a habit. This is where most health apps fall 
short: they help us repeat the behaviour, 
but they don’t help us develop habits. 


We tend to think of habits as ‘things 
people do on a regular basis’, but this is 
not enough for a behaviour to be consid- 
ered a habit. Psychologists define habits as 
‘automatic responses to contextual cues’. 
This means that, to form a habit, we need 
to repeat the new behaviour in the same 
context: after the same routine event, in 
the same location, and so on. 


THE STUDY 

I reviewed the functionality of 115 habit 
formation apps for iOS and Android to 
understand how they support contextual 
cues. Turns out they don’t. Almost all apps 
follow the same pattern: you enter a goal, 
set up optional reminders, and then record 
every day that you’ve done your task. 

Even though context is crucial, apps do 
not encourage users to select environmental 
cues that could guide their behaviour. Instead 


of forming a healthy habit, users develop the 
habit of using the app and learn to rely on 
reminders. The latter can actually get in the 
way of habit formation. 

My colleagues from UCL and I ran two 
studies to investigate how reminders support 
habit formation compared with contextual 
cues. We asked some participants to use 
existing routine events as cues and to form 
action plans (e.g. ‘I will do X after eating 
lunch’). Another group received reminders, 
and the rest (the control group) were simply 
told to repeat their behaviour. 

We discovered that participants who 
formed action plans and relied on daily 
routines developed stronger habits. Those 
who had to respond to reminders forgot 
less often, but formed even weaker habits 
than the control group. This is not entirely 
surprising: if people know something will 
remind them, they don’t even try to remem- 
ber on their own. 


TRAINING WHEELS 

Of course, all that complicates the design 
of health and wellness apps. Providing 
reminders and simple tracking options 
is not enough if we want our apps to be 
effective in the long term. These make people 
dependent on the app, rather than helping 
them achieve real change. To ensure our 
users form new habits we need to remind 
ourselves why people use these apps. 

Good behaviour change apps are like 
bicycle training wheels. They help you start 
off and guide you as you develop your skills, 
so you can finally ride without them. The 
goal is to help users make that new behaviour 
part of their daily routine. Over-reliance on 
the app can get in the way of this. 

We need to change how we think about 
behaviour change apps. The obsolescence 
should be the main measure of success, and 
continued engagement with the app a sign 
of failure. So the next time you’re working 
on an app that aims to help users change 
their behaviour, ask yourself what you can 
do to make users abandon the training 
wheels. Because if your app works, they 
won’t need them any more. 9 


Katarzyna (@falkowata) is currently doing a PhD 
at UCL. Her research explores how smartphone 
apps could help people make healthy behaviours 
part of their daily routine 
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HOW DO YOU 


DESIGN A LOGO? 


Stand-out logos are often deceptively simple. So how can you craft 
a memorable mark? And when do you know when it’s finished? 


GRAHAM SMITH 


Logo designer 
thelogosmith.co 


ten My process relies on developing that one 
awesome idea, rather than splitting my 
time between a handful of less refined or diluted 
ideas. | avoid giving a client choices; it rarely 
ends well. | take time to soak up the brief, to 
really ‘get’ what is required from the logo, and 
the client, then set to work. Knowing when a logo 
is complete is mostly a combination of listening 
to the client's feedback and trusting my gut. 


LOUISE FILI 


Designer 
louisefili.com 


i) | sit down with a tracing pad 
and a #2 pencil, and start 


sketching. | write the name over 
and over, letting it speak to me. 
Many pages later, it will have 
evolved from an amorphous jumble 
of letters to a more precise design. 
| will gather specific references, 
make a more informed sketch, 

and have it transformed on the 
computer. The biggest challenge is 
to make it look as though it were 
not created digitally. 
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CINDY VRIEND 


Designer, JustC 
justc-design.com 


f a LAURA BOHILL 


s 


Y Designer, Ghostly Ferns 
4a D ghostlyferns.com 


9 ZACK DAVENPORT 


| Designer 
mrdavenport.co 


TA) First | get an understanding of the client’s needs. We'll develop a 
moodboard together and I'll do simple sketches of anything that comes 
to mind. On Illustrator I'll come up with a bunch of concepts that I'll later 
present to the client. | try not to delete anything during this stage, since 
I'm trying to get as many ideas out there as possible. 

I'll continue to explore several variations, but as | get feedback from the 
client those explorations become more focused. This usually lasts several 
rounds of back-and-forth feedback. This part of the process is where we'll 


look at colourways. We may be considering three to five options, but we'll 
refine them until we've decided on a final scheme. A project is done when 
the client is happy and approves the final design. I’m personally satisfied 
when everything is pixel-hinted. 


f + JACOB CASS 


Graphic designer 
7 justcreative.com 


& In theory, the logo is done when the client 
approves it. However, as designers it’s in 
our blood to get things to perfection. If a client 
approves a concept, you could take that concept 
further, or explore a variety of similar options 

to ensure you have the best possible solution. 

| believe doing this makes you more entitled to 
say the logo is ‘finished’. Either that or when 

the deadline is up. 


IAN PAGET 


Graphic designer 
logogeek.co.uk 


) | start by creating goals based 
around the business, such as 


its mission, competition and target 
market. | then perform focused 
research and make design choices 
to meet these goals. | sketch and 
explore ideas, then select the 

best to take into Illustrator. | make 
copies to simplify and perfect the 
concept. It's important to have 

time away from your designs before 
completion, so you can polish them 
with a fresh pair of eyes. You know 
the designs are complete when they 
meet the initial goals and no further 
refinements are needed. 


FURTHER READING 


LOGO LAWS CHEATING COLOUR SYMBOL STRATEGIES 
+) Logos have to be individual and iconic. +) Have you ever toiled over a logo design, +) Symbols can require a lot of work to 
But is there a formula designers could only for it to be thrown back in your become widely recognised. In this 


refer to, to make sure they’re not breaking any face because it didn’t stay within the client's article (netm.ag/wordmark-273), designer 


fundamental logo rules? Designmatic has brand guidelines? In this article (netm.ag/ Sagi Haviv from Chermayeff & Geismar explains 


broken down the key components of logo logocolour-273), Jason Santa Maria explains why wordmarks can be a more effective way 
design in this infographic (netm.ag/logoinfo-273), | how you can take a few liberties with a brand’s of advertising your business than developing 
to keep you on the right track. 


bible when it comes to colourways. a visual brand logo. 
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CSESESESE 


HEYDON 


PICKERING 


The accessibility expert on the importance of 
designing for others rather than showing off 


la INFO 


job: Lead designer, 
Neontribe 


w: heydonworks.com 


t: @heydonworks 


net: You’re the web accessibility editor at Smashing 
Magazine — how important is accessibility? 

HP: Assuming that people are your target audience 

- not fish, aardvarks or robots - I’d say nothing 

can be more important. The main thing standing in 
the way of accessibility is designers and developers 
leaving it to other people; expert consultants. They’re 
afraid to give it a go because they fear they might do 
it wrong. Have a go! It doesn’t have to be perfect - 
nothing is. 


net: You’ve said that you have a love/hate 
relationship with CSS. What do you currently 

love most or hate most about it? 

HP: CSS gets a lot of abuse for not being a ‘grown 

up’ programming language. Folks complain it’s not 
modular or whatever, but it’s not supposed to be. 
Consistency is an important aspect of good visual 
design, and the way CSS lets you apply common styles 
across similar elements with minimal effort is a good 


thing. I hate it when I encounter CSS that lacks this 
intended elegance; styles that have been removed 
from any kind of continuum to be micromanaged 
independently. So, really, it’s the corporate design 
process I hate. CSS is all good. 


net: You’ve done talks on unusual CSS techniques 
— can you tell us about some of those? 

HP: I created the ‘lobotomized owl selector’ 
(netm.ag/owl-273) as an alternative to the current 
movement towards breaking up CSS into little 
isolated assets. I wanted folks listening to think 
about the relationships between the widgets and 
modules they incorporate into their designs; the 
lines between the dots. So much that’s great about 
the web is predicated on lines joining things up, 
from hyperlinks to relational databases. 


net: Does your writing help you discover new 
ways to work? 

HP: Some people learn by reading, others by listening 
and some by doing. I think I learn best by writing. 
Often when I start out writing an article or blog 
post I’m only half familiar with the subject matter. 
Writing about it is an exercise in structuring it in 
my head. I always try to moot something different, 
because what’s the value in just joining a chorus of 
agreement? Some take this personally and think 
I’m telling them they’ve got it all wrong. 


net: You’re leaving Neontribe soon. What are 

your plans now? 

HP: I’m going to be freelancing as an accessibility 
consultant, focusing on UX. I already have a project 
lined up where I’ve been invited to review the product 
at a very early stage in the design process. This 
means I can help the team build in accessibility from 
the outset, which is much cheaper and much less 
arduous than the alternative. I’ll also be spending 
more time writing, and making designer cycling 
clothes. I don’t even cycle. 


net: What’s the key to a great UI? 

HP: A designer may notice the difference between 
a 6ofps transition and a 30fps one, but John Doe 
trying to book a train ticket online will not. A serious 
problem emerges when we prioritise smoother 
frame rates over basic accessibility and usability. 
And that happens because we tend to make things 
for ourselves. Good interfaces should be like 

good typefaces: transparent. Any interface which 
is about the interface - which draws attention to 
itself - is an exercise in showing off, and a failure. 
The best thing you can do is to user test with your 
target audience, not just colleagues. 
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can glean from Google Analytics, WITH A DIGITAL do you ensure you're paid on 
and explore how to master SUBSCRIPTION a Sore ee 


design for smart devices SEE PAGE 24 


GOT AN APPLE DEVICE? 


Download net’s interactive iPad edition, or read a print replica on your iPhone or iPod Touch 
) p p y 


NETM.AG/NET-IPAD tux, NETM.AG/NET-IPAD-US (us) (@EEEEES 


CATCH UP ON ANY ISSUES YOU'VE MISSED 
BY DOWNLOADING OUR DIGITAL EDITIONS 


DEVELOP * 
net: 
ORIENTATION 


ne - 
#910 SUMMER o015 


The freelance special: we 
reveal the pros and cons of 
going it alone, and share tips 
for landing big clients 


° fi 


net 


FROM CSS 
TOSASSIN 
WORDPRESS 


DESIGN 
() INTERFACE 
“| ANIMATION 


#965 APR 2015 


Val Head shares her secrets for 
amazing interface animations, 
and we reveal how to switch 

from CSS to Sass in WordPress 


ef 
- 


rf OPTIMISE 
she YOUR SITES * 
FOR MOBILE 


My 25 HOTTEST. 


‘WEB DESIGN 


TECHNIQUES 


EAD “ op ted, ne PERS bd 
BETTEH WEB 


owe 


#989 AUG 2015 


Designers share their tips for 
building a better web. Plus, 
discover how to optimise 
your sites for mobile 


OBA MAR 2015 


We present the techniques 
you need to build your best 
ever site. Plus, a look at the 
top 20 emerging design trends 


°o B 

apt gi Mie BUILD BETTER 

net WORDPRESS 
WEBSITES 


#968 JUL 2015 


We run down the 10 top tools 
you need to build responsive 
sites, and introduce the 
Genesis Framework 


° 


he veace of web design PRO IMAGE 
ne OPTIMISATION 
TECHNIQUES 


WEB DESIGN 
> ea 7 Be 


a desi xr 2015 
#263 FEB 2015 
Discover the design tools set 
to revolutionise your workflow 


this year. Plus, we look at how 
to boost site speed 


ping aegponsivé Silko 


#987 JUN 2015 


Discover how to plan, build 
and maintain WordPress 
themes, and manage large 
CSS projects with ITCSS 


a oe a] 


#969 JAN 2015 


We reveal everything you 
need to know to build your 
first mobile app, and uncover 
the power of SVGs 


PREFER T0 READ ON ANDROID, PC OR MAC? 


net is also available on Google Play and Zinio, as well as Kindle, Nook, Windows 8 and more 


NETMAG/NET-GOOGLEPLAY SE 


NETM.AG/NET-ZINIO. &zinio 


Sensational design and superb development 


Responsive Field Day 


ii 


Join us for a spirited, knowledge-packed day scouting the frontiers of responsive web 
design and development in lovely Portland, Oregon. Responsive Field Day is a welcoming 
and affordable gathering for web designers and developers. 


Fri, Sep 25, 2015 
9:00am ~ 6:00pm 


SVG, GREENSOCK, SUIT CSS 


9 > 
Revolution Hall Tickets 


Portland, Oregon 


Register Now 


RESPONSIVEFIELDDAY COM 


Cloud Four cloudfour.com 


Now available—only $175! 


S This event site was created by the very 


clever folks at Cloud Four. Coming 
from this amazing team, you would expect 
a pretty awesome implementation. They 
did not disappoint. 

“We wanted it to feel focused and 
relevant but also friendly and inclusive, 
with some of Portland’s inherent 
strangeness intact,” says lead designer 
Tyler Sticka. “The quirky, toy-like robots 
frolicking along the Northwest landscape 
represent individuality, fun and future- 
friendliness.” 
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The team has used a grid framework that 


I haven’t come across before: SUIT CSS. This 


provides a great foundation without all the 
extras you sometimes get with Bootstrap 
and similar frameworks. 

The CSS is beautifully crafted with lots 
of comments to indicate why each element 
was used. You could argue the team was 
being lazy in not removing it - however, 

I like to look at it as a fantastic learning 
example that would help anyone getting 
into writing CSS see why and where 
particular rules are included. 


JUSTIN 
AVERY 


- 


Justin is a digital consultant 
by day, and by night creates 
the RWD Newsletter, hosts 
a RWD podcast and runs a 
RWD knowledge hub 

w: responsivedesign.is 

t: @justinavery 


Responsive Field Day 


ik i ee 


Join us for a spirited, knowledge-packed day 
scouting the frontiers of responsive web 
design and development in lovely Portiand, 
Oregon. Responsive Field Day is a 
welcoming and affordable gathering far web 
devignars and developers. 


Fri, Sep 25, 2015 
2} 9:00aen~ 6:00pm 


Revolution Hall 
Portland, Oregon 
Tickets 

Now available—only S175! 


“This site is a ton 
of fun, and since 
it’s made by Cloud 
Four it naturally 
demonstrates the 
responsive best 
practices they’re 
such advocates of” 
BRAD FROST (@BRAD_FROST) 


Hello! I’m Meagan Fisher, an owl- 
loving designer who writes and 
speaks about her work and life. 


3 we 


o 


Hello! I'm Meagan 
. Fisher, an owl-loving 
q Ty designer who writes 
> and speaks about her 
4 work and life. 


TYPOGRAPHY, RWD 


OWLTASTIC.COM EE 


Meagan Fisher owltastic.com 


This is a wonderfully fun portfolio site and blog from the talented designer Meagan 
Fisher. Fisher has strayed away from the popular approach of hamburgerising the Pin kK 
navigation, instead opting to stack it ... and it works really well. 
The design is a big departure from Fisher's previous portfolio site. “| wanted something 
that felt more like me,’ she explains. “With the last design | had a very stripped down site, 
and this left it feeling more like a template than my online home.” 


Towels 


Now at the Wall! see his shadow self 


alking in step beside him, and I 
Fisher has created a playful, unique experience, while still being content-focused. ae Ai om aoa 


The breakpoints give each piece of content on the page enough space to breathe across 
a variety of devices, and design touches such as drop shadows and gradients make the 
site a delight to browse. Fisher has selected the perfect complimentary fonts and paid 
attention to measure and line length, so reading is a pleasure. 


realize this dark, blurry, wall-Dad, 
obscured by the names of dead boys, is 


“My goal was to let the site be a playground for the colour, imagery and layout 
experimentation,” she smiles. “| hope it will continue to evolve as my style does.” 
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SITE OF THE 
MONTH 


GRAPES & WINES 


eS 


~~ 


% C553 ANIMATIONS, RWD, VELOCITY.JS 
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MASI TUPUNGATO 


Argentinian Soul, Vewetian Style 


“Masi Tupungato 
has created a 
beautiful example 
of seamless 
design and slick 
performance. 

A thoroughly 
enjoyable 
experience” 

CHRIS BURNELL 
(@IAMCHRISBURNELL) 


FONTSMITH.COM 


Fontsmith fontsmith.com 


As you would expect, the 

Fontsmith site is all about the 
fonts. This is an ecommerce store that 
showcases the beautiful products it 
has on offer. 

Unlike the type studio’s individual 
font microsites, this uses images rather 
than the fonts themselves for the most 
part. This is mainly because at a certain 
point fonts cost more to load than 
images, so when showcasing a wide 
range of examples it makes sense to 
use bitmaps rather than font files. 

An excellent test area for each 
individual product ensures users don’t 
miss out on seeing exactly how each 
font renders on their particular device/ 
browser before they buy it. 

“When making additions to the 
site we wanted to be able to pick from 


@ CLIENTAREA #@ SUBSCRIBE 


BRUSH 


a set of modules and styles to build 

a brand new page without necessarily 
writing any new CSS,” says Marcus 
Taylor of Taylor/Thomas. Decoupling 
style from content and layout in this 
way has big advantages, not just in 
terms of rendering speed but also 
maintainability, as developers are 
less likely to break layouts. 

The team also worked to tell the story 
behind each font. “We quickly realised 
each font had a set of characteristics 
that the Fontsmith designers were 
passionate about. Often a single 
letter could embody a font’s entire 
personality,” Taylor says. “The depth 
of content is now so much greater, 
so the user really gets a thorough 
understanding of the craft behind 
each font.” 


& SIGNIN W BASKET! Checkout 


—PASS 
SLEEPER 


COVER 


Fontsmith is a leading type foundry creating fonts that are distinctively 
human and full of character. 
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CROPIRUST.ORG/2014 


Epic epic.net 


> Crop Trust is an international organisation working to safeguard 
crop diversity. Although that sounds like literally watching grass 
grow, the site is playful and interactive while also being informative. 
The team at Epic — the agency behind the site — has used some great 
fullscreen photography to bring the story to life. 

The GreenSock library has been used for animations, including 
the Canvas-based triangle animations that tie back to the logo 
and brand; and the transition between the report homepage and 
supporting content. These animations are subtle and add to the 
experience. They are left out of the mobile experience, which is all 
about the content. 

One of the biggest challenges for Epic was the amount of 
content it was required to deal with: the website would act as 
the Crop Trust's primary source of information. Its solution was 
a three-tiered structure. “The chapters and key figures were 
organised as panels to provide a quick and very visual overview 
of the report's content,” Benoit Rondeux from Epic explains. 

“We then piled up the chapter pages so users can read each topic 
one after another, like a book. Atop of that, we grouped all the 
highlights of the year (news, events and so on) in a compact and 
visual timeline, accessible from the panel view.” 
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KEY FIGURES 


CROP VARIETIES DISTRIBUTED 


124K 


ANN 


Trust 


UAL REPORT 2014 


internationa parnization working 
rop diversity, forever 


MARIE HAGA 
EXECUTIVE OURECTOR OF THE CROP TRUST 


TIMELESS STYLE 


US.ONEILL.COM 


Electric Pulp electricpulp.com 


ONEILL «= 


/ 
f . 


O’Neill has really nailed the 
commerce website market. It 
approached its redesign with a simple 
aim: “We wanted the new site to have 
both purpose and soul on the smallest 
screen through to the largest.” I think 
they nailed the brief several times over. 
Built by the team at Electric Pulp, the 
new site is a star example of the potential 
impact of RWD: after the responsive 
version of ONeill launched, it saw an 
increase in conversions of 65 per cent 
on the iPhone and over 400 per cent 
on Android, and a revenue increase of 
101 per cent and 591 per cent respectively. 


Put that in your responsive pipe and 
smoke it! 

The website is stunning in its visual 
simplicity, providing enough white space 
to allow each product to shine. Although 
it is very image-heavy, the first paint is 
a passable three seconds. 

The site uses an implementation of the 
element and to target the 
descriptor only, with Picturefill.js to 
catch any older browsers. SVG is key when 
it comes to simple, crisp iconography on 
any responsive site. Here, Grunticon is 
employed as a fallback to ensure everyone 
gets a similar experience. 


—— UNREASON Ay 
= €O MRO 


ONSILL 


SUP=RFEECE 


4 
we | 


ONEILL << 


eet farteratee 


“Dang. O’Neill’s 
redesigned (and 
responsive!) 
storefront is 
looking SHARP” 


ETHAN MARCOTTE (@RWD) 
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®) TODAY'S OZY THE PDB SECTIONS TOPICS vineO ABOUT OZY 


A Hand-Held Heads-Up for 
Earthquakes 


Let's Make All School 
Lunches Vegetarian 


OZY.COM 


OZY ozy.com 


FAST FORWANE 


Nuclear Deal 


The LittleKnown Enemy of 911 Calls 


OZY is an example of how to execute 
a great responsive experience for 
a news site. The mobile-first approach 
means the site loads the mobile version of 
the images to begin with, and then if the 
user’s device benefits from a larger image, 
this is loaded using attributes. 
The reading experience is great: there 
are three well-constructed grids that 
span across seven different breakpoints, 
to ensure the content is always the focus 
as you move between devices. 
One of my favourite features is the ‘Most 
Read’ section on the homepage. Here, all 
the HTML content is loaded and ready to be 
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read, but the images are lazy loaded. This 
saves a ton of bandwidth and ensures the 
content is immediately available. 

OZY also implements an infinite scroll 
to enhance the reading experience. Moving 
from article to article on the mobile is 
seamless, but when the scrolling would 
have a negative effect on performance 
(like with iOS7 or older IE versions), this is 
disabled and recommended articles remain 
as standard links. 

The simple touches of colour are just 
one of the subtle design decisions that 
help make this one of my favourite sources 
of content. 


A= ® “SEE 
SMART NOTEBOOKS FOR 


SAVVY SCRIBBLERS 


BY VIGNESH RAMACHANDRAN — AUG 23» 2015 


SAVE UP 10 99% 
WHEN YOU SUBSCRIBE TODAY 


TAKE OUT A SUBSCRIPTION 10 NET AND GET DELIVERY DIRECT 10 
YOUR DOOR, WHEREVER YOU ARE IN THE WORLD 


FREENS2 69 
= , ™ he voice of web design “CREATE SVG 
. "Pi W UY 


© 13 issues delivered to your door 

e Packed with the latest web trends, 
technologies and techniques 

e Prices include shipping 


Europe from > (Save upto.) 
US/Canada from = (Save up to.) 
Rest of the world from => (Save) 


DIGITAL PRINT + DIGITAL 


e Interactive videos and galleries @ Choose when and how you read your magazine 
e Stream screencasts, extra images and more © 13 issues in a one-year subscription 

© Get instant access to the latest issues e Apple and Android edition download 

Europe from © 30.00 (Save up to °%") Europe from © 6*.00 (Save up to 40°») 
US/Canada from © 30.00 (Save up to 47°») US/Canada from ©) 00 (Save up to 55») 

Rest of the world from © °0.00 (Save 47°) Rest of the world from © °3.50 (Save 53°») 


SUBSCRIBE ONLINE AT ©) oy0U) Sooo rn nes costo 


Sublime design ! , AS I 
& creative advice 


THIS MONTH FEATURING... 


Ghostly Ferns is a creative 
family based in shiny New York 
City. We work for happy 
Ce 


eo 


FOCUS ON 


Help users remember important information 


by making it the first or last thing they see, 
suggests Gene Crawford 


t 
PROFILE 
Web designer Yesenia Perez-Cruz chats about 
standing out at design school and keeping cool 
when working with big-name clients 


HOW WE BUILT 64 


Parallax scrolling and a dramatic soundscape 
helped Spring/Summer announce a new 
headphone collaboration in style 


DESIGN 


CHALLENGE 


PROFILES 


This month... 


DATING SITES 


PURDI GIBSON 


Purdi is creative director of digital 
product design studio Nova 
w: wearenova.co.uk t: @wearenovauk 


C } MICHAEL CATTELL 
~~» - Michael is a freelance digital designer and 


Pes frontend developer with a taste for coffee 
w: michaelcattell.com t: @mikeycattell 


JAMIE HOYLE 


é Jamie is a student frontend developer 
currently building apps at Karambyte 
w: hoyle.io t: @mightyshakerjnr 


HM saier 


This month we'd like you to design a dating website. 
Recent years have seen a boom in online dating, so your 


design needs to stand out in a very saturated industry. 
Make it specific and focus heavily on user experience — 
you'll need to keep people coming back. 


#CHASINGTAIL 


SLOPORT & SAFETY 


CHASING TAIL 


, 


important pers 


(BesidesmyolM pet) 


AgOut SUPPORT 4 Savery #CHARNGTAIL 


Whether you’re looking for love or just on the prowl, this site puts your furry friend first 


“Are you a dog or a cat persone” A deal- 

breaker of a question when asked early 
on ina relationship. As a dog owner, I wanted 
to create this platform to meet like-minded 
people who already have an important 
individual in their life: their pet. If you’re 
looking for a relationship or simply on the 
prowl, Chasing Tail is an alternative dating 
site, where the initial focus is on your pet. 

Skilful, well considered UX, combined with 
a simple user interface allows the site to be 
fully responsive, eliminating the need for 
separate desktop and mobile journeys. This 
mobile/desktop approach to development 
opens up options for interaction on mobile 
(think Tinder), but I wanted to avoid pressuring 
users into making instant decisions. 

Security is ensured through an SSL-protected 
load balancer, with sensitive information stored 
in a database accessible via the application 
servers only. 


Q CLOSE UP 


(1) Symbolic icons representing user preferences and 
actions plus minimal user information ensure a clean 

Ul. (2) Unconventional images give the brand a playful 
voice and personality, and set the tone for a digital 
marketing and social media campaign before and during 
launch. (3) The user can sign up with Facebook or email. 
Integrating an Instagram account would also be a great 
way to import quality imagery. (4) On first land it is clear 
what the site is asking of the user: Are you a dog or a cat 
person? Whether you have a pet or not, this simple starter 
should get people searching and using the site within 


seconds. (5) In the search results the pictures speak for 
themselves. Information provided shows the name of the 
person, with a pet's name as a secondary item. Simple 
icons indicate if they are a dog or a cat person, and an 
obvious ‘Filter’ button helps the user take the next step 
without distracting from the imagery. 


MY MONTH 


What have you been 
doing this month? 

| finished designing the 
new North Wales Fire 
and Rescue Service site, 
and took time to draw 
and paint. A lot. 


Which sites have you 
visited for inspiration? 
| visit the-dots.co.uk 
for inspiration, and to 
connect with amazing 
creatives. 


What have you 

been watching? 

A bit slow off the mark, 
but I've just started 
Orange is the New Black. 


What have you 

been listening to? 

A lot of house, 
especially Julio 
Bashmore. The 
constant funky beat 
helps me concentrate. 
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MY MONTH 


What have you been 
doing this month? 
Relaunching my 
website and styling 
Magento websites. 


Which sites have you 
visited for inspiration? 
typewolf.com — it's a 
gorgeous collection of 
lovely type. As | have 
just found out I’m going 
to be a father, a lot of 
baby websites! 


What have you 

been watching? 
Grand Designs. | dream 
of building my own 
house. 


What have you 

been listening to? 
Since returning from 
living in America I've 
not stopped listening to 
The Weeknd on repeat. 
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Fadia 


Introducing a new way to 


find lovésand-adventure 


TRAVEL IN PAIRS 


A site that puts the adventure back into dating by matching users with a shared love of travel 


No place Is safe from us! 


& Dating is dull, isn’t it? Not to mention 
awkward. I wanted to create something 
different, something for a more niche market. 
The idea was to remove awkwardness and add 
fun (fun is good) by aiming at folks who have 
a shared love of travel or adventure. 

The site will be monitored by the users via 
a simple ‘flag’ system. Due to the nature of the 
date, each applicant will need to be authorised. 
Authorisation will include a screening process 
of (at a minimum) a thorough interview. 

This matchmaking website has a strong 
social element once you are logged in. I’ve 
gone for a minimal website layout, with a ‘less 
is more’ approach. This aim is to get the user 
signed in and active straight away. It provides 
a friendly and fun atmosphere in which love 
can blossom — or at the least you can share tips 
on where to go on holiday! 


Q CLOSE UP 


(1) A powerful <h1> combined with a striking hero image 


ensure users know what the deal is from the outset: it's 
a dating website linked to travelling. There's a big call to 
action that grabs the attention of the user to get that click 
(not parallax!). (2) The carousel uses powerful images to 
really get the imagination going. Information is provided 
in short bursts to enable the user to absorb as much as 
they can, quickly. (3) When it’s scrolled into the viewpoint, 
the video starts playing (although it’s muted until clicked/ 
hovered over). This showcases locations along with 


comments from past couples to reassure users of the 
service's trustworthiness. (4) A timeline showcases the 
itinerary of the get-away. This helps put potential daters 
at ease, as everything is taken care of and scheduled. 
(5) A very simple last-ditch attempt to get that sign up 


— strong imagery of past locations and a carousel showing 
current users, picked at random. 


THE BEST WAY TO FIND 
RUNNING DATES 


We find you potential partners based on ability, 
hobbies, location. and more. 


GET RECOMMENDED ROUTES 


We work out the most convenient routes from 
our database of over 50,000+ routes for you and 
your partner 


SAFETY FIRST 


Footiose automatically records your runs for 
your safety, as well as letting you upload your 
times to our challenge system. 


FOOTLOOSE 


Tackle your fitness regime and your love life in one go with this running date app 


Already a member? 


SIGN UP FREE TODAY 


amt 


Jennif 


Email address 
| want to go joaging = £) 
I'ma woman + 


looking for anyone > 


S Running dates are becoming increasing 
popular, with more and more people 
taking to the streets in search of happiness. 
Footloose is designed with this in mind: it 
connects single walkers, joggers and runners of 
similar ability in the same area, and suggests 
the best routes for them to follow. 

The site is designed mobile-first, and I’ve 
used the brief as an experiment in Google’s 
Material Design spec. I’ve designed the 
typography to make the site as accessible 
as possible, with CSS animations and hover 
states used for animating text fields and subtly 
highlighting active UI elements. 

All icons are SVGs, to ensure everything 
looks crystal-clear on high-res displays. On 
desktop browsers, the gaussian-blurred card 
backgrounds are created using CSS3’s filter 
property, while on mobile devices this falls 
back to simple transparency. 


Q CLOSE UP 


(1) The design uses drop shadows to highlight different 
layers and create an illusion of depth. This extends from 
containers to individual elements like the activity type 
indicators. (2) The card layout offers a familiar Ul paradigm 
for users, while ensuring elements display well on 
desktop. Titles, background opacity and styling are all 
retained across desktop and mobile cards. (3) The profile 
picture field is linked with Gravatar to automatically pull 
an avatar for a user based on their email address. If the 
user doesn't have one linked, Footloose uses the new 
File API to handle file uploads — cropping, previewing, 
and eventually uploading the new profile picture. (4) 
Subtle animation of the activity icons provides a visual 
representation of the activity selected. (5) On mobile, the 


entire design collapses downwards so each card takes up 
the full width, with the signup form prioritised. 


CET FIT. 
MEET NEW PEOPLE. 4 


SIGN UP FREE TODAY 


5 


Tra guy = 
boolaing fer 


THE BEST 
RUNNING 


Reph 


I want to 98 rurining t 


WAY TO FIND 
DATES 


We fier! you potential partners based on atsllty 
hatte locetion. and enare 


3ET RECO 


MMENDED ROUTES 


MY MONTH 


What have you been 
doing this month? 
Laying down the 
groundwork for anew 
trip app we're making 
at Karambyte. 


Which sites have you 
visited for inspiration? 
materialup.com and 
siteinspire.com. 


What have you 

been watching? 

The new series of 
BoJack Horseman, and 
the blissful return of 
the football league 
season. 


What have you 

been listening to? 
Muse's new album 
Drones, Public Service 
Broadcasting, and 
whatever Apple Music 
decides | should listen 
to this week. 
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® 


Build flexible, responsive sites with the hottest new 
techniques including Flexbox, Susy and more 


15 APIs every Build a data Create a 
developer needs dashboard with consistent icon 
to know AngularJs set in Sketch 


ISSUE 274 ON SALE 29 OCTOBER 


myfavouritemagazines.co.uk 


SERIAL POSITION EFFECT 


Put the emphasis on the first and last things a user sees in order 
to secure them in their memory, suggests Gene Crawford 


S As designers, we all notice and study 
patterns. We learn to adopt visual 
patterns for our layouts that work well to 
solve problems for our clients. I’d like to 
give some attention to one great concept 
that leads us to a very useful pattern: the 
serial position effect. 

This is the idea that people have a 
tendency to pay more attention to the first 
and last items in a series. At its core this 
relates to people’s long-term memory use. 
The first and last items in a series are easy 
to remember because we are able to devote 
a greater amount of our brain’s processing 
power toward them. 

This concept of serial position effect 
and recall can manifest itself visually 
when you use a list. If you’ve ever seen 
a presentation where the speaker used a 
slide with a dozen bullet points on it, you 
can never recall all the items on that slide 
once the talk is over. A better solution 
would be to use one bullet point per slide. 


Similarly, if you design a very long scrolling 


website, the very top and the area near the 
bottom will be recalled most easily once a 
person has finished visiting your site. 
Using spacing and rhythm to slow down 
the viewer will help secure content in their 
long-term memory. This concept is also 
used a lot in email marketing — chances are 
you’ll remember a ‘P.S.’ note from an email. 
Keep the concept of serial position 
effect in mind and use it strategically the 
next time you are working on a layout or 
organising content visually. 


Gene's mission is to work tirelessly 
to provide inspiration and insight 
for developers. His recent projects 
include unmatchedstyle.com 


(1) The website 
for SuperFriendly 


(superfriend.ly) takes 
this concept to its 
core and delivers 
visually different 
sections as you 
scroll down the 


(ts the Nera Bierce 


page. It also saves 
the best part for 
last. (2) The design 
company Ghostly 
Ferns (ghostlyferns. 
com) takes this 
concept into account 
by keeping things 


City, We work 


The Ghontly 
1s Vaamaily 


visually varied as 
users scroll down 
its site. It puts some 
emphasis on the 
top and bottom 
sections. (3) Long 
scrolling pages 
where the content 


woreapparnsis 


Meg Lewis 


Heed Beans 


trve the Bug 


visually looks 
similar — like on the 
portfolio website 
for Peirre Georges 
(nerval.ch) — can be 
hard to remember 
once you've gone 
elsewhere. 
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Awards: Best Celebrity/Fan Site 


Areas of expertise: Design, UX, 
Selected clients: MTV, Harvard 
University, Zappos, Papa John’s 
website 201 


Location: Philadelphia, USA 
typography, performance 


Designing since: 2009 


PROFILE 


YESENTA 
PEREZ-CRUZ 


yeseniaperezcruz.com 


The Puerto Rican web designer 
on keeping cool and learning 
from the greats 


Yesenia Perez-Cruz had something of 

a dream start in the web industry. Having 
caught the eye of Chris Cashdollar at a design 
class, she landed her first full-time job at Happy 
Cog, where she cut her teeth working with the 
likes of Jeffrey Zeldman and Ethan Marcotte. 
Since, she’s become a regular on the speaker 
circuit, and is now senior product designer at 
Vox Media. We chatted to the Puerto Rica-born, 
New Jersey-raised creative about the rise of 
‘perceived performance’, unusual methods of 
keeping creative and how to stay cool when 
working with big-name clients. 


net: How did you get into design? 

YP: I was a quiet kid growing up. I moved from 
Puerto Rico to New Jersey when I was five, 

and the culture and language barriers made 

me a bit of a loner. I spent a lot of time reading, 
writing and drawing. Around age 14, my family 
got a computer and 56k modem. I loved creating 
fan art, and in the early 2000s I was running a 
Christina Aguilera fan site and making graphics 
for my Myspace and LiveJournal. All of this 
naturally led to me pursuing graphic design 

in college. 


net: Were you inspired by anyone growing up that 
pushed you in this particular direction? 

YP: One of my elective classes in high school 

was graphic design. It was taught by Richmond 
Garrick, a talented painter from Sierra Leone. 

I fell in love with graphic design in that class and 

even though I was already applying to colleges > 
for journalism, I changed my mind and decided 
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VOTE NOW! 
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MTV O Music Awards With Happy Cog, Perez-Cruz worked on the websites for MTV's O Music 
Awards — an online music festival and awards show 


p to major in graphic design. Mr Garrick 
helped me photograph my work and 
put together a portfolio that I sent to 
Drexel University. 


net: You got your job at Happy Cog after 
taking a class taught by then-creative 
director Chris Cashdollar. What did you 
do to make yourself stand out? 

YP: I think I stood out because, although 
my portfolio was mainly print pieces, 
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I had a strong understanding of design 
principles and diverse work. I’d also 
spent a year and a half interning ata 
user experience agency which rounded 
out my print-heavy education. 

Despite all that, I had a lot to learn 
in terms of designing for the web. You 
need to constantly think of how to guide 
a user through various pathways. That 
was something that was difficult for me 
to grasp at first. ] was used to thinking 


THE ROAD TRIP-IS LIVE! 
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in terms of individual pages, and had 
to learn to design systems. 


net: You were at Happy Cog for five years. 
What did your time there teach you? 

YP: I learned everything from how to 
keep my Photoshop files neat to how 

to present work and lead a project. 

Aside from that, I learned that one of 

the best aspects of this industry is how 
we all share information and push 
ourselves to be better. 

Working with people like Jeffrey 
Zeldman and Ethan Marcotte who 
have had such a profound influence on 
this industry was incredibly inspiring. 
From Jeffrey, I learned that the best 
thing any web designer or developer 
can do is learn to write and speak. 
While it’s always scary for me to get 
up on a Stage and talk about my work, 
putting my thoughts and process into 
words has been instrumental in my 
growth as a designer. 


net: While you were at Happy Cog you 
worked with MTV on three O Music 
Awards sites. Tell us a bit about that ... 
YP: They’re some of my favourite projects 
because the MTV design team and the 
Happy Cog design team were so closely 


integrated. Since the websites supported 
a live show, at the beginning of the 
projects the MTV team would tell us what 
the theme of the show would be. Then the 
MTV and Happy Cog design teams worked 
on moodboards to see how that theme 
could come to life on the web. 

Because we were so close, once we 
had a general design direction, the 
MTV team could work with their video 
and set design team to make sure that 
the direction of the set design and motion 
graphics matched the website. It was 
always really exciting to me to have 
the web design lead motion graphics 
and set design. 


net: How do you stay creative working 
with briefs from big-name clients? 

YP: Sometimes working for big clients 
can be nerve-wracking. There can be 

a lot of pressure to create amazing work 
that will please everyone on the client 
team as well as impressing your peers. 
If ’m too worried about creating 
something brilliant, I'l] end up creating 
something safe and boring. If I find 
that I’m designing in fear, I need to 
stop immediately. 

Something that helps me is to get all 
the ugly out of my system by sketching 
and experimenting. I have to remind 
myself that I love designing, and the best 
results will come out of having fun. If 
I’m working with another designer, we 
may trade comps halfway through. It’s 
awesome to see where a design can go 
when someone with a fresh set of eyes 
works on it. 


net: You’re now working as a product 
designer for Vox Media — have you had 
to alter your working methods at all? 
YP: I haven’t had to change much of how 
I work. Design principles are the same no 
matter who you’re working for. I’ve found 
that on a product team we can design 
smaller components and move them 
into a testing environment quicker, 
and continue to tweak and iterate. 

In client work, I’d often only have 
one shot to design a solution, so there 
was much less continual iteration and 
improvement. Timelines in client 
services work also tended to be longer 


because there were more sets of 
stakeholders that needed to review 
and approve the work. 


net: You’re a part of Girl Develop It. Why 
are initiatives such as this important? 

YP: Girl Develop It is fantastic. ’ve met 
lots of women that have started their 
careers in tech after taking a few classes. 
The classes are fairly small, so it’s easy 
to ask questions and get one-on-one 
attention. It’s important for women to 
feel like they’re comfortable and able to 
ask questions in a learning environment. 


net: How can the web industry become 
more inclusive? 

YP: The industry has a lot of work to do. 
Beyond recruiting and hiring minorities, 
we need to find ways to keep them here. 
This means we need to accept and value 
diverse opinions. We need to be mindful 
of biases we may have. We need to make 
sure that when we hire minorities, we 
have proper mentoring and support 
systems in place for them. 


net: You’ve said you don’t necessarily 
need to know code to work technically. 
Could you expand? 

YP: When I say you don’t need to code 

to be a web designer, I mean you don’t 
need to ship production-ready code at 
your company. It’s important for all 
designers to understand how developers 
think and how a developer would build 
your design. 

Frontend and even backend 
development classes can be really 
valuable for designers. I also think 
typography and design fundamentals are 
important for developers to know. A team 
full of specialists with a diverse pool of 
knowledge that communicate constantly 
is really the ideal. 


net: How have performance demands 
changed over the years? 

YP: Websites grow increasingly slow 

and bloated every year. Thanks to some 
folks fighting to raise awareness of 
performance issues, I think the industry 
is becoming more conscious of what a 
huge problem these slow, heavy sites 
are. We still have a lot of work to do to 


YESENIA PEREZ-CRUZ 


What's on your desktop? 


Sketchbook, La Colombe coffee, and 
a new planner from ban.do. 


What little things make 
your life worthwhile? 


Sites: The Toast, Instacart, YouTube 
Apps: Instagram, Slack, Fitbit 
Reading: Between the World and Me 
by Ta-Nehisi Coates 
Audio: Father John Misty, Leon Bridges, 
StartUp podcast 


What do you have 
on the walls? 
A print from illustrator Kyler Martz. 
What will you do for lunch? 
I've been making lunch at home. I’m 
working my way through Yotam 
Ottolenghi’s Jerusalem: A Cookbook. 
What hours do you work? 
Usually 10am-6pm. Sometimes 
earlier, sometimes later. 
What else do you do 
in the office? 
| work from home, so there’s 
a lot of talking to my cats. 


How often do you hang out 
with other designers? 
| try to work out of the Vox offices 
at least once a month. 
Describe your working 
culture in three words ... 
Coffee, Slack, music. 
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A look at the key dates in 
Perez-Cruz’s career 


JUNE 2009 


Graduates from Drexel University. 
Becomes a designer at Happy Cog 


Vv 


Attends first An Event Apart 


Vv 
JULY 2010 


Works on new design direction 
for Zappos.com 


Vv 


Work with MTV wins at the 
Webby Awards 


Vv 
JANUARY 2013 


Teaches first typography workshop 
with Girl Develop It Philadelphia 


Vv 
JUNE 2014 


Joins Intuitive Company 
as a UX designer 


Vv 
SEPTEMBER 2014 


Debuts talk on performance and design 
at Smashing Conference in Germany 


Vv 
FEBRUARY 2015 


Speaks at first An Event Apart 


Vv 
MARCH 2015 


Takes the world’s longest commercial 
flight to speak in Sydney, Australia 


Vv 
JUNE 2015 


Joins Vox Media as senior 
product designer 
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ABOUT DISTRITO * BOOK A TABLE 


VW Beetic Table 


Jose Garces For this site, Perez-Cruz tried to capture the richness and vibrancy of the restaurant 


make sure our content is as accessible 
as possible. 

Recently, we’ve been focusing more 
on perceived performance, which means 
we’re worrying more about how we load 
assets instead of what we load. This 
means that we can deliver a usable 
portion of a site very quickly, even if 
the site is asset-heavy as a whole. 
Advertising continues to be an issue 
when it comes to performance, as ads can 
block the rendering of content on a page. 
I think reforming how ads are served to 
users should be something we as an 
industry tackle next. 


net: How do you find the balance between 
consistency and variety? 

YP: Constraints are really good for 
designers. I talk about finding a balance 
between consistency and variety often, 
and I think that’s the key to being 
creative yet responsible. I use business 
and user goals as a way to prioritise 
aspects of a design. For instance, if the 
client wants to show off beautiful, high 
resolution photography, I'll build my 
design strategy around that. I may keep 
typography and other design elements 
more simple to allow the photography to 
be the star. This allows me to think of 
creative ways for users to interact with 


the photos while also prioritising - which 
is key to designing for performance. 


net: Your design for chef Jose Garces’ 
restaurant is beautifully bold (netm.ag/ 
garces-273). What inspired you here? 
YP: Luckily for me, the inspiration for 
that project came from the food and 
interior décor of the restaurants. I got 
to eat delicious food and take in the 
lively atmosphere as research. 

Capturing the richness and vibrancy 
of the restaurants was challenging. 
Often, restaurant sites are too literal, 
with music playing and large background 
images. For the Garces sites, we put the 
user experience first. The goal of the 
redesign was to get people to book 
more tables through the site. From 
there, I choose design elements that 
would support this goal — that’s why 
the ‘Book a Table’ bar is the most 
embellished part of the design. 

This design was really all about doing 
more with less. My initial comps had 
much more design detail and I kept 
taking more and more elements away 
and letting the beautiful photography 
speak for itself. 


Next month: Brooklyn-based 
designers Anton & Irene 


Win one of 30 European trips for two people to see 
Vee the woods. j * sustainable forestry and paper making in action! 
aud the trees *  BLIPP TO ENTER or visit twosides.info/competition 


Entrants must be aged 18 or over. Entries close 31.01.16. For full terms ond conditions visit www. twosides.info/competition-lerms 


Did you know that forests in 
Europe, which provide wood for 
making into paper and many 
other widely used materials, are 
30% larger than in 1950? In fact 
they have been increasing by 1.5 
million football pitches every 
year, * 


Magazines are printed on paper 
from natural and renewable wood, 
which is great to know if you love 
reading your favourite magazine. 


t World Forest Resources, 1953 and UN FAO 
Global Forest Resources Assessment, 2010 
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HOW WE BUILT 


B&O PLAY RAPHA EDITION 


Spring/Summer brought together an emotive soundscape, powerful 
imagery and parallax scrolling to announce a headphone collaboration 


a BRIEF 


When B&O Play teamed up 
with Rapha to make a special 
edition of its H6 headphones, 


Copenhagen-based digital agency 
Spring/Summer was asked to tell 
the story via a compelling microsite 
on B&O Play's web platform. 
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1) The soundscape plays an important role. 

t helps underpin the three parts of the story 

— prepare, race and recover — with the unique 
sounds that you associate with road race cycling. 
2) Key words and sentences fade from white 

to pink as you scroll through the experience to 
help highlight parts of the story. (3) To make the 
experience engaging and immersive, Spring/ 
Summer created an interactive storytelling format 


with a mix of media, tied together with a parallax 
scrolling effect. (4) An animated cog appears and 
transitions into a simple circle with a section label 
inside to introduce and separate sections in the 
story. (5) A timeline in the shape of a profile from 
a road cycling race helps orientate the user, and 
provides an alternative way to navigate. This 
moves into the screen when the story begins, 
and then reappears at key points. 


ROBERT 
THOMSEN 


HENRIK 
DAHLQVIST 


ROBIN 
ISAKSSON 


Robert is creative director at 
Spring/Summer. He led the 
concept for the project 

w: robertthomsen.com 

t: @robertthomsen 


> Danish audio brand B&O Play 
collaborated with British cycling 

brand Rapha to create the H6 Rapha 
Edition headphones. To launch the 
product, web agency Spring/Summer 
was tasked with creating a story that 
could primarily live on B&O Play’s 
web platform as a microsite (netm.ag/ 
H6-273), but would also be used in 
consumer touchpoints ranging from 
social media to the B&O Play blog. The 
final experience uses sound and imagery 
to take the user through three phases 
of cycling: prepare, ride and recover. 


net: How did you start the project? 

RT: After the first meeting with B&O 
Play it became clear that timing was 
going to be a challenge: we only hada 
couple of weeks to define the concept 
and design, and get sign-off from B&O 
Play and Rapha. Our top priority was 
for everyone to get on board with the 
overall concept. The solution was going 
to live on B&O Play’s platform, so we 
also needed to make sure it could 
work on their CMS. 


net: What sort of experience did you 
want to create? 

RT: We wanted to really underpin 

the connection between sound and 
cycling; in particular the effect of music 
during preparation, turbo sessions and 
recovery, but also the distinctive sounds 
you associate with road race cycling. 
This connection formed the basis of the 
experience, with a narrative of three 
chapters: prepare, ride and recover. 


Henrik is an art director at 
Spring/Summer and was lead 
designer for the site 

wt: henrikdahiqvist.com 

t: @henrikdahlqvist 


Robin is a frontend developer 
at Spring/Summer and led the 
site's development 

w: springsummer.dk 

t: @robisak 


net: How did you create the soundscape? 
RT: We wanted to underpin the three 
parts of the story with unique sounds. 
It was important the soundscape felt 
connected and fluid, but was also 
dynamic enough to follow the user’s 
personal pace through the story. 

To accommodate this we built the 
soundscape in several layers that 
are triggered based on where the user 
is in the experience. Some sounds are 
more consistent and intensify through 
the experience, while others are 
introduced at key points in the story 
and fade away again. 


net: What does the parallax scrolling 
effect contribute? 

RT: The backbone of the experience 

is the story, but it was vital to tell it in 
an entertaining way that would keep the 
audience engaged. To accomplish this, 
we created an interactive storytelling 
format with a mix of media, tied 
together with a parallax scroll. 


net: How did you achieve the effect? 
RT: First we defined a dynamic layout 
that could connect and trigger various 
elements in an interesting and 
surprising way. We created a simple 
grid in Photoshop and outlined the 
placement and sizes of the elements, 
and roughly how they would behave, 
before moving into an HTML prototype 
to test how it would feel. We spent a lot 
of time moving back and forth between 
Photoshop, After Effects and HTML to 
get the right feeling and timing. 


> 


Key stages in the 
microsite project 


MID MARCH 2015 


B&O Play briefs Spring/Summer 
on the project 


Vv 


LATE MARCH 2015 


Initial concept for the experience 
is described in simple text format 
and shared with the client 


Vv 


EARLY APRIL 2015 


The experience is sketched out 
and wireframes are shared with 
B&O Play and Rapha 


Vv 


MID APRIL 2015 


Design starts up and first round 
is presented to the client 


Vv 


LATE APRIL 2015 


A detailed design of the entire 
experience is produced, as well as 
animation references for frontend. 

All product images are captured 
on a one-day shoot 


Vv 


EARLY MAY 2015 


Sound design begins and the first test 
site in HTML is shared with the client 


Vv 


MID MAY 2015 


Final tweaks are made to the 
experience and QA starts 


Vv 


LATE MAY 2015 


The site is launched to coincide with the 
release of the Rapha H6 headphones 
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EVOLUTION 


A look at the research, user testing and 
prototypes that led to the final design 


(1) We sketched out the overarching concept, then defined 
the content elements in more detail. This helped us map out 
the exact assets we would need to create and source. 

(2) To plan for the photoshoot, we did quick individual 
sketches of all the photos we wanted. (3) We set up a studio 
shoot to capture all the product photography. (4) One of the 
final retouched product shots, which we used for the 
experience. (5) Wireframes helped us define the grid and map 
everything out in greater detail (6) In the visual design stage 
we defined colours, typesetting, layout, Ul and so on. 
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p net: What’s the role of the timeline? 
RT: This helps orientate the user and 
gives an alternative way to navigate. 
It moves onto the screen when the 


story begins, and reappears at key points 


to show where you are. To prevent the 


timeline disrupting the story, we decided 


to have two states: one fully open that 
you can see on rollover and when you 
scroll down to a new section; another 
that’s more subtle, providing a visual 
indication of where you are. 


net: What were your design concerns? 
HD: It’s always important to build in 
little details that can help drive the 


experience and surprise the user enough 


that they will want to go through the 
full story. For example, in the opening 
section we use a dotted background that 
transitions into a circle with a headline, 
which acts as a sort of introduction to 
the story. The circle and dots symbolise 
the speakers in the headphones and 
also the idea of going ‘into the zone’. 

We also wanted to define the different 
sections in the story, so we evolved the 
circle from the introduction into a 
section breaker. An animated cog 
appears and transitions into a simple 
circle with a section label inside. 


net: What were the biggest challenges? 
RI: It’s crucial to start projects ina 
good way: the structure of the code 
and your thinking around it will follow 


©. 


Design touches Linking features such as the recurring motif of the circle help connect the story and guide 


users through to the end of the experience 


you throughout the project. This 
experience relies a lot on the timing 

of the elements that make up the story, 
so we moved away from a static design 
process into more of a parallel workflow, 
with prototyping and motion tests. We 
would constantly sit down and evaluate 
the timing: is this appearing too early, 
too late, and so on. 


net: How did you test your design? 

RI: Prototyping is an important step 
and we started coding the same day 
we kicked off the design. Development 
stayed in line with new design ideas. 


In the pink The experience is mostly black and white, but pink touches are used to highlight text 
and design elements — such as the distinctive timeline — as the user scrolls through 


We tested a fair few sound effects 
before we landed on the right solution. 
One idea that we tried out was a bike 
chain sound that linked playback speed 
with scroll speed. It was interesting 
and fun, but ultimately we dropped it 
because it was too domineering. 


net: What was the biggest lesson 

you learned on this project? 

RI: We kept experimenting with how 
best to use sound throughout. Of course 
you want to nail it straight away, but it 
doesn’t always work out that way. This 
project taught us a lot about working 
with sound in a dynamic way, and we'll 
be a lot better equipped to work with 
sound in future projects now. 


net: What advice would you give 

any studio facing a similar brief? 

RT: It can be hard to get your head 
around all that factors that make a 
compelling interactive story experience 
- dynamic layout, time, transitions, 
mixed media and so on. So make sure 
you move from static design into 
prototyping as soon as possible. This 
helps you test the ideas you have in your 
head, and ensures they come together 
in the right way. 9 


a Next month: Interactive Haiko, 
a collection of online experiences 
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*\ FROM 
a Bs PHOTOSHOP 
Be 10 SKETCH 


There’s a new kid on 

the design app block, 

and it’s causing many 

Photoshop users to jump 
eee ship. Designer Brian Hoff 
ee explains why he made the 


and creative director switch to Sketch 


of Brian Hoff Design, 
a Philadelphia-based 


boutique digital agency ver the past year or two, 
with a focus on web Bohemian Coding’s Sketch app 
and mobile platforms has gained momentum across 


and products 


Ahiophofdesieilvsen the glorious internets as a 


‘better’ alternative to Photoshop. 
 iiiernigini Most of this ample praise has come 
from the web and interface design 
community. If you’re anything like 


NEIL STEVENS 
Neil is an illustrator, 


image-maker and me, then you’re always on the lookout 
graphic artist based in for new tools and better alternatives to 
St Albans and London. an existing workflow. However, at first 
He has worked for I was tentative about handing over my 
clients including the _ Ph hob 
= - Guardian, The V&A 20-year Photoshop baton. 
and Paul Smith For the most part, Photoshop does > 
crayonfire.prosite.com the trick and does it well enough. 
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Oh, Hi. 


We look alike don't we, Sketch? 


of 


Ease of use 


o 


Familiar faces Sketch was built exclusively for Mac. If you've ever used Apple's software, in particular Keynote, you'll notice a similarity in its UI 


‘Why switch?’ I thought. Photoshop 
shortcuts are my second language. 
Performing a specific effect or task no 
longer required much brain power since 
I had likely already done something 
similar many times over. This old dog 
was thinking that Sketch was for the 
new-school cool kids. 

As the chatter surrounding Sketch 
increased, my curiosity finally got the 
best of me. I needed to see for myself 
why Sketch had caught fire amongst 
my peers. As I was about to begin a 
new project, I decided the moment was 
right. If 1 was going to do it, I wanted to 
give it my all for a week. I closed down 
Photoshop, downloaded a 30-day trial of 
Sketch and took a dive into the deep end 
with no flotation device, hoping to keep 
my head above water long enough to 
figure out what the hype was all about. 
If you’re thinking of exploring Sketch, 
I'd recommend this approach. 

Within two to three days, I was 
convinced. Once again, I felt enthusiastic 
about opening up a piece of software, 
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Sketch’s focus is specifically those that design 
websites, interfaces and icons. Compared 

to Photoshop, Sketch’s menus look stripped 
down. A nice breath of fresh air 


and I reaped the benefits instantly. 
I quickly felt comfortable learning 
the new interface. The overlap with 
Photoshop was just enough. I was in 
love. ‘Yes!’ I thought. 

In this article, Pll be covering a few 
of Sketch’s core features, and comparing 
them to their Photoshop equivalent. 
If you’re on the fence, looking for a 
better (and much cheaper) alternative 
to Photoshop, or as curious about its 
increasing popularity, then read on. 


HELLO, FRIEND 

Sketch is exclusive to Mac OS X, 

and by the looks of Bohemian Coding’s 
FAQ section, it’s not even considering 
supporting Windows and Linux. This 
is good for us long-time Mac users. 


If you’re at all familiar with OS X’s 
productivity apps (Pages, Keynote, 
Numbers) or have used any older, 
discontinued software by Apple (?m 
looking at you iWeb), you’ll instantly 
feel like you’ve run into an old friend 
that’s grown a more mature beard. 

Much like I did in Keynote when I 
started using it, the first thing I did in 
Sketch was to customise the top toolbar. 
You do this by simply right-clicking on 
it and tossing as many items as possible 
onto it. 


Keyboard shortcuts 

The advice I received from numerous 
friends and Twitter folk was to learn the 
shortcuts as quickly as possible. However, 
the visual guidance of the tools along the 


Drag your trronte items into the toolbar 
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Keep it simple While Photoshop has a toolbar in view at all times, some of Sketch’s tools are a bit tucked away at first 


|107-20|_| 
X 


Maths minds Need to add an extra 20 pixels 
to that 180px button? Just type 180+20 


toolbar helped me to better understand 
Sketch’s capabilities and how it handles 
various tasks. Many of the tools will be 
semi-familiar from Photoshop, but they 
are now located in different places. In 
Sketch’s case, a more unified area. 

To help my transition from Photoshop, 
I brought over some frequently used 
keyboard shortcuts by creating custom 
keyboard shortcuts in OS X. If you’re 
not familiar with this process, get ready 
to fall in love. It’s quite easy to do right 
from your Mac’s System Preferences. 
Also, here’s a handy list of Sketch 
Shortcuts to get yourself familiar 
with: sketchshortcuts.com. 


Don’t get me wrong: Photoshop gets 
the website and UI mockup job done 
and does it well. It also does a ton of 
other stuff well, too. It sets out to be 
the tool for everyone. And you know 
what? That’s OK. One issue, though, 
is that it lacks focus as an app for web 
and user interface design. 


Sketch’s focus is specifically those 
that design websites, interfaces and 
icons. Compared to Photoshop, Sketch’s 
menus look stripped down. A nice breath 
of fresh air. No more fighting through 
the clutter that doesn’t necessarily 
translate to the web. Sketch’s tools and 
values lie in what translates easily to 
CSS and browsers in general. 

For example: making and customising 
the layout settings (ie. creating a grid). 
In Sketch, predefined fields enable you 
to customise your grid’s total width, 
gutters, columns and rows. As someone 
who always works with responsive grids, 
I’m constantly in these settings before 
starting a new project. 


Another feature that showcases Sketch’s 
emphasis on the web and UI is its preset 
templates and artboard presets. And for 
this ?m thankful. 

Let’s say you’re starting a new iOS 
app project. You could either create 
a new project like you’re used to in 
Photoshop, or select the ‘iOS UI Design’ 
template Sketch provides under File 

> New From Template . The advantage here 
is that Sketch first presents you with an 
iOS UI kit for quickly mocking up iPhone 
apps and dragging, say, the native iOS 
keyboard into your mockup. 

Recently, I was mocking up a map 
view for a booking app I was working 
on. I didn’t have to open up a separate 
file or hunt around for an iOS map 
mockup. Just toggled over to my 
Elements page and copy and pasted. 


DEVS AND SKETCH 


Sketch is not only an amazing option for 
web designers, but also a huge timesaver 
for the developers in your life. My friend, 
developer Carlos Gavina, encouraged 

my switch to Sketch. 

“It starts with everything being 
vector,’ says Gavina. “You don’t have 
to work any harder for Retina assets 
or request new design files to support 
the new @50x resolution in town. | love 
being able to simply select the element 
and export the file type and resolution 
| need. No slicing required.’ 

While both Sketch and Photoshop 
have slicing capabilities, rulers and 
guides for measuring elements and 
distances when converting mockups 
to HTML and CSS, Sketch gives you the 
option to ignore those workarounds. 
“The days of checking proportions 
between two elements using smart 
guides or calculating percentages with 
that old clickity calculator are no longer. 
It's built directly into Sketch.” 

There's also a nifty plugin called 
Zeplin (zeplin.io) that takes design 
hand-off a step further. Zeplin exports 
code snippets and stores everything 
on the cloud. This way everyone has 
the latest guidelines: attributes like 
colour palettes, fonts and more. Your 
CSS file will thank you. “Sketch and 
its community are clearly focused 
on solving the problem of a better 
transition between design and 
development,” Gavina smiles. 

l asked Gavina about the first time he 
experienced Sketch. “I felt comfortable 
moving around the file, much like | do 
in Photoshop. In both apps, there’s a 
similar hierarchy of layers.” 

However, he made an interesting 
observation. “Files tend to be more 
organised. Making a selection is much 
easier in Sketch.” is 
your friend. This can sound like a small 
thing, but being able to go though a file 
you did not create quickly makes your 
life easier and workflow faster. 
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Pages and docs While Sketch varies from Photoshop in that it stores all of its pages within one document, they both 


handle layering, grouping and organisation in a similar way 


SIZED TO PERFECTION 
Just like Photoshop, Sketch’s Inspector 
enables you to define exact sizes and 
positions on an artboard. Sketch, 
however, has an itty-bitty secret to 
its Size and Position Inspector. It 
understands maths! Not only addition, 
subtraction, multiplication and division, 
but also percentages. 

Want to shift a button to the left 
20 pixels? Just add ‘-20’ to the field. 
Want an image to fill half the entire 
artboard? Just type ‘50%’ into the 
width field. Brilliant! 


ONE PROJECT, ONE FILE 
With Photoshop, my project and file 
structure looked something like this: 


BigTimeClient folder 
~ BigTimeClient_landing-page.psd 
- BigTimeClient_about-page.psd 
- BigTimeClient_contact-page.psd 


Sketch handles things a bit differently. 
A single Sketch file houses all the pages 
and artboards within one document. 

At first I was concerned it would crush 
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my Mac’s performance, however I’ve 
since designed iOS apps with roughly 
30 screens and did not experience any 
significant performance issues. 

The main benefit of this approach is 
that you can access and view all your 
screens side by side, so it’s much easier 
to make changes and compare things. 
If you’re mocking up various responsive 
breakpoints you’ll absolutely love it. 


Export Desktop 


Export Exporting objects or artboards in Sketch is simple: 
select what you want, choose the sizes and name them 


the app, since it mimics Photoshop in 
various ways. Much like Photoshop, this 
is where you view, rename, search for 
groups (folders) and elements across 
your project. 


ONE FILE FITS ALL 

In Photoshop, Id typically create three 
(or more) file assets. One for @1x and 
another for @2x and yet another for 


A single Sketch file houses all the pages and 

artboards within one document. This means 
you can access and view all your screens side 
by side, so it’s much easier to compare things 


Recently, Photoshop introduced its 
version of multiple artboards. However, 
in Sketch it’s possible to organise all 
the artboards into pages within one 
document, making this feature much 
more powerful. Otherwise, the multiple 
artboards in both applications function 
very similarly. 

The layer palette in Sketch brought 
a level of comfort when I first opened 


@3x. Saving those out separately was 
tedious. Unless you were working with 
vector objects and elements 100 per 
cent of the time, this became painful. 
Sketch has not even one rasterised tool 
or element in its app. Well, unless you 
drag one in, of course. 

When creating an iOS app design 
project in Photoshop, I’d design at a 
much larger size on my screen and test 


In the cloud Creative Cloud Libraries is a personal favourite of mine. Easily access, drag and drop objects or layers from one 


Photoshop document to another 


Making an impact With its much lower price point and focus on UI and web design in particular, many web designers are 


choosing to switch from the trusty Photoshop in favour of Sketch 


over a mirroring app, Skala Preview, 
on my iPhone. 

With Sketch, my workflow when 
working with Retina devices and assets 
has changed and improved dramatically. 
I now design at the standard device size. 
Since everything is a vector by default 
in Sketch, I don’t have to worry about 
making my artboard abnormally large 
on my desktop so I can preview the work 
over mirroring (now via Sketch Mirror). 
Working from desktop to mobile feels 
more natural now. 

What’s more, saving out various sizes 
of elements is as simple as clicking an 
export button, adding as many sizes 
and file formats as you’d like, and ... 
well, that’s it. You can even drag and 
drop layers and groups to your desktop 
to save things out - although the Export 
button gives you more control. This 
is by far one of my favourite Sketch 
features, and one of the biggest time- 
savers as well. 


Photoshop’s Smart Objects and 
Linked Smart Objects are extremely 


handy and powerful. I used to use 
them often, especially when designing 
apps and interfaces that utilised a lot 
of repetitive elements. 

If you’re unfamiliar, here’s a quick 
use case. You’re designing a mobile 
breakpoints navigation and you’re 
already 15 screens deep into the 
workflow when you realise something 
needs to change. If you weren’t working 
with Linked Smart Objects you’d have 
to manually open every file and make 
your change in each one. With Linked 
Smart Objects, you can alter one element 
and all its counterparts will change 
automatically. Huge time-saver! 


Another of my favourite features in 
Photoshop, which is also fairly new 

to the programme, is Creative Cloud 
Libraries. Simply drag commonly used 
assets to their own Libraries panel, 
for easy access when you want to drag 
and drop them onto other areas of the 
project. If you want to read about CC 
Libraries in more depth, go over to 
netm.ag/library-273. 


AFFINITY PHOTO 


AFFINITY PHOTO 


Sketch is a great option, however it 
still leaves us Mac users in need of 
a ‘photoshopping’ app. Say hello to 
Affinity Photo (netm.ag/affinity-273). 
This offers professional photo editing 
for a fraction of the cost of Photoshop, 
with no subscription system. 

Like Sketch, Affinity Photo is built 
exclusively for Mac, which gives us 
a more native feel. Retina UI, core 
graphics, force touch integration 
and OpenGL all bring a more tailored 
experience, while tools for enhancing, 
editing and retouching images provide 
a familiar feel to Photoshop's image 
editing capabilities. Darkroom favourites 
such as marquees, lassos, dodge and 
burn, blur, sharpen and more will make 
you feel right at home if you're already 
familiar with Photoshop. 

Affinity Photo prides itself on having 
a ‘rock-solid foundation’, which brings 
the highest levels of performance, 
stability and precision. Everything is 
applied live — no more previewing your 
effects then reopening to edit. Applying 
filters feels intuitive, especially in the 


case of blend modes (overlay, soft light 


and so on). Finally you can just thumb 
through the effects and watch them 
change instantly. Another awesome 
feature is the way Affinity handles 
selections and refinements. If you've 
ever tried to cut round someone's hair, 
you'll know what | mean. 

If you're looking for a cheaper 
alternative to Photoshop for editing 
photos or creating custom graphics, 
I'd definitely suggest Affinity Photo. 
Like Sketch, its power lies in its focus 
on doing one thing and doing it well. It 
also has a sibling app, Affinity Designer, 
that bridges the gap between Sketch, 
Photoshop and Affinity Photo. 
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RESOURCES 


Bohemian Coding website 
bohemiancoding.com/sketch/learn 


Bohemian Coding’s website for Sketch 
has a nice little section on the basics 

of Sketch. | found this useful prior to 
downloading the app, as it meant | 
could better understand the differences 
and comparable features between 
Sketch and Photoshop. 


Medium 


medium.com/sketch-app/latest 


As a fan of Medium, following along 
with all the articles posted by a variety 
of people on the topic of Sketchis a 
great way to learn and stay up to date 
with new tricks and features. Here 
you'll find people posting on everything 
from ‘organising Sketch for iOS’ to 
‘what the heck to do with that scissor 
tool looking thingy in Sketch’. 


Twitter 
twitter.com/behoff/lists/sketch 


Twitter was an extremely valuable in 
learning Sketch for me. Above is a link 
to a list of Twitter accounts posting 
awesome resources daily. 


Plugins for Sketch 
netm.ag/plugins-273 


The Sketch community is strong and 
so are its plugins. Here's a great list 
of available plugins that will certainly 
pique your interest. 
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Smart symbols Sketch Symbols are similar to Photoshop's Linked Smart Objects, but a bit more customisable and powerful 


Reusable elements You can reuse assets on different 
pages, and changes will be translated across 


What do Linked Smart Objects and 
Libraries in Photoshop have to do with 
Sketch, you ask? Well, Sketch has this 
little, big thing called Symbols. I think 
of it as the love child of Linked Smart 
Objects and Libraries, with a dash of 
hot sauce for an extra kick. 

With Symbols, you can reuse assets 
or groups across pages and artboards. 
Make a change to the Symbol and, 
hot diggity dog, it changes everywhere! 
It even remembers spatial alignments 
if, for example, you’re adjusting assets 
and/or text in a list. Even the words 
of the text change. 

And here’s that extra dash of hot 
sauce I spoke of: ‘Exclude Text Value 
from Symbol’. Take for example, a button 
style that repeats, but with different 
text. Want to change the button style 
across the board, but keep the text? 

No problem. No extra ‘Change all 
instances’ option. Magic! 

In addition to a group of elements 
that update automatically, you’ll also 
find joy in defining styles for layers and 
text. Define, for example, H1 tags in GT 


Objects Every shape you create in Sketch is an item in the 
layers list — no more hidden paths 


Walsheim - size 48 and with a shadow, 
and all instances will update across the 
board. Again, like magic! 


When designing user interfaces, apps 
and websites in Photoshop, I typically 
used shapes to create a variety of 
elements. You’ll find similar ground 
with Sketch. Shapes is where I spend 
most of my time, creating buttons from 
rectangles, filling or masking large 
rectangles with image fills, drawing 
separator lines, and so on. 

Photoshop provides you with a variety 
of ways to create vector and non-vector 
shapes and paths. However, Sketch is 
built around scalability. Everything is 
vector-based, and shapes can easily 
be adjusted on the fly. 

For example, you could go back and 
add a corner radius to a rectangular 
button simply by selecting the ‘Radius’ 
option. You could also fill any shape 
with a photo and resize either one in 
a non-destructive way. This is great 
when testing how responsive images 
will scale and resize. 


Other options If you're looking for a less expensive alternative to Photoshop for more graphic 
design purposes, give Affinity Designer a try 


GT Walsheim Medium 


GT 


GT Walsheim Medium Oblique 


Walsheim 
by 
Grilli Type 


GT Walsheim Black Oblique 


Beauty 


GT Walsheim Ultra Bold 


GT Walsheim Ultra Bold Oblique 


Type love No matter Photoshop or Sketch, 
a great typeface is always worth a mention. 
| just discovered Grilli Type recently 


Switching from 
Photoshop to Sketch: A 


Live Blog 
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Sketch diary | live-blogged my first few days with Sketch at brianhoffdesign.com. 


My diary documents my experience, frustrations and fumbles 


Sketch has this little, big thing called Symbols. 
I think of it as the love child of Linked Smart 
Objects and Libraries, with an extra kick 


When masking an image within a 
shape, a personal tip is to not use the 
‘Use as mask’ option. Instead, ‘Fill with 
image’ gives you much more flexibility 
most of the time. 

There’s also common ground between 
shape combinations in Photoshop and 
Sketch. While I don’t personally create 
custom icons in Sketch (or any software 
for that matter), I do find myself needing 
unique shapes here and there. However, 
I'd imagine icon designers use this 
feature quite often. 


BEYOND SKETCH 

Here I’ve just touched on some of the 
features, differences and familiarities 
when moving over from Photoshop. 
Sketch feels like a great leap in the 
direction of a better, more fine-tuned 
workflow for designing UIs and sites. 
This doesn’t eliminate the need 


for a ‘photo shop’ application, like 
Photoshop or Affinity Designer, though. 
Sketch’s power lies in its focus as an app 
for web and user interface design. No 
more, no less. 

The learning curve from Photoshop 
to Sketch was quick enough. It took me 
three and a half days to get about 90 per 
cent comfortable within the app, and it 
was three weeks before I felt like I had 
a 99 per cent grasp on things. You can 
read more about my experience on my 
site, where I live-blogged my journey 
(netm.ag/days-273). 

Sketch’s user base is growing fast. Its 
community of plugins is impressive and 
effectively extends Sketch’s capabilities. 
If you’re looking for a new tool, and at 
an extremely reasonable price, Sketch 
is a great option. In my opinion, at the 
moment, it’s the best choice for UI work. 
I’m excited for its future. 
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YOUR CLIENTS 


Amy Kapell shows you how to turn 

your everyday communications into 
a charming experience your clients 

and colleagues will rave about 


or any competitive industry, 
and certainly the digital 

7 . 6 5 Pg ca RS 
space, the creation of high Se 
quality work alone isn’t ANE 


: Amy (@amykapell) is 
enough. While you may the VP of client strategy 


win business on the basis of your at California digital 
work, you don’t keep that business, agency Closed Loop. 
grow that business or evolve She's been enchantingly 


managing its clients 
in SEO, UX design and 
conversion strategy for 


that business into a long-term 
partnership without something 


else, without a little something over nine years , 
extra. That something extra is 
enchantment. istration 


BEN THE ILLUSTRATOR 
WHAT IS ENCHANTMERMT? For over 15 years, Ben 
Enchantment isn’t hokery-pokery has been spreading 
a Pee his illustration work 
or mysticism, nor is it purely 


: : aie F on everything from 
esoteric. Neither is it fleeting; magazine covers and 


a one-time act of creating billboards to textiles 
delight. It’s not even about being bentheillustrator. 
an enchanting person (though [APES eat 


that can initially help). Client 
enchantment is the end result of 
engaging in a set of customisable 

tactics and strategies, based on 

the belief that looking at the world 
through the eyes of another is > 
fundamental to client services. 
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Home ground Meet often with your clients, in their own environments 


Enchantment elevates those involved 
to a higher level of engagement, 
respect and trust, and occurs over an 
extended period of time. You don’t do 
enchantment; you achieve it. 


Before we discuss tactics and strategies, 
it’s necessary to understand some 

core principles of client enchantment, 
specifically: caring about your client, 
enjoying what you do, and customising 
your communication. 


Care about your client 

Think back to the last time you felt 

cared for. How did you know the 

care was authentic? Chances are 

it was because it was based on an 

understanding of your unique needs 

or situation, and someone wanting the 

best possible outcome for you. This is 

how every client should feel about the 

person providing them service. That’s 

how every client should feel about you. 
The good news is that it’s not hard to 

learn how to genuinely care about your 

clients. Your ability to care about them 

comes from knowing something about 
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them; about their work environment, 
their motivations, their hopes, and 
maybe even their fears. We’ll talka 
little more about this later. 


Enjoy what you do 
People want to work with those who 
enjoy what they’re doing. This is 


AA 


Possible outcomes It helps to anticipate issues and 
plan for the unexpected 


and enjoying what you’re doing is a 
client on the way to enchantment. 


Try this 

The next time you’re in a meeting or 

a presentation and you realise this is 
an area that really interests you, look 
for a brief moment to make a comment 


People want to work with those who enjoy what 
they're doing. If you're passionate, geeky or just 
plain enthusiastic about what you do or a particular 
part of a project, let it be known 


particularly true when striving 

to enchant your clients. If you’re 
passionate, geeky or just plain 
enthusiastic about what you do or 
a particular part of a project, let it 
be known to your clients. 

You don’t have to derail a meeting 
to do it, but a simple aside here and 
there over the course of a project 
can easily and genuinely convey your 
enjoyment of the subject at hand. 

A client that knows you’re engaged 


to that effect. Use the example below 
as a thought-starter: 


“I know this sounds geeky, but I’m really 
excited these 2,000 articles are getting 
pulled into a relational, searchable database. 
This will be so helpful for users looking for 
this kind of information.” 


You’ll be surprised at how much clients 
are enchanted by the knowledge you’re 
enjoying their project. 


Why Is it useful? 


0 Subject Line Raptor Design Revew 3 Clients are often inundated with dozens, if noc hundreds. of 
~ for your feedback emalts/day, often from multypte 5 Multiple projects. 

hould inc ct AND the 

action needed (eg. “for your feedback", “for your reference’). 
Salutation Salutation of your Hi fonin and 
olce o 

2 Summary Purpose of email] + Attoched is the Roptor The client should be able to read the fir 

‘xtion needed) Design Review 2 PDE foryour easily understand what the ema + needed of 


1.2 sentences max feedback 


Context/ 
Details 


4 Call To Action 


Offer Help « 
Close 


Customise your communication 
No two clients are the same. As such, 
you can’t employ the same tactics and 
strategies for every client and expect 
them to work equally well ... or even 
at all. One client may only want the 
high-level view. Another might want 
to know all the specifics. Some clients 
hate email; others love it. Certain clients 
might prefer you get straight to the 
point while others like it when you tell 
that one joke you know. 

We customise the projects and 
solutions we provide to our clients. 
In much the same way, if we seek to 
enchant our clients, we must also 
customise how we communicate 
with each of them. 


Try this 
Think about two current clients you 
know fairly well. Write down how you 
think each of them prefers the emails 
they receive to be written, how they 
like meetings to run, whether they like 
to talk on the phone or in person. 

Now consider how you communicate 
with each of them. Do you treat them 
the same? If yes, knowing what you 


thorn, 


ut, bold the deadline and always 


dorrt just say “next Tuestay") ane! specific 


To help the timir 


include a 


time of day ( 


know about their differences; why? 
If not, how does your communication 
style differ between them? 

If you’re working with a client who’s 
very new or for whom you can’t answer 
the previous questions, ask them 
directly what they prefer. They’ll thank 
you for it - and be enchanted you asked. 


The pursuit of client enchantment lasts 
as long as the client relationship itself. 
The longer you work with clients, the 
greater the set of tactics and strategies 
you can employ. Below are some tried 
and true approaches that have proven 
to help achieve enchantment time and 
time again. 


Get to know your client 
As a professional service provider, part 
of your job is to understand your clients 
- their needs, their challenges, and even 
their idiosyncrasies. This knowledge 
is vital because people who know each 
other work better together. 

Without this knowledge, incorrect 
assumptions can be made, important 
information can be ignored and 


Enchanting emails 

No matter how ubiquitous and casual email 
communication has become, in the world 
of client services, your email recipients are 
still your clients. They deserve a thoughtful, 
coherent and professional email from you 


— every single time. 


If you have a long, established 
relationship with a client and both parties 
are in mutual agreement, you can move 
into a more casual email style. Until then, 
you should always err on the side of ‘too 
professional’ versus ‘too casual’. Each client 
email should be a well-crafted, customised 
piece of communication. 

That said, ‘well-crafted’ doesn’t have to 
mean ‘long’ It means being thoughtful about 
how your client will consume the email and 
what information is needed in order for that 
person to take the action you're requesting. 

Every email should have a: 


1. Clear subject line that combines the topic 
of the email with the desired action 


. Salutation that addresses either your 
client by name or the team. Don't start a 
client email without including a greeting 


. Summary that briefly states the purpose 
of the email and any action needed (one 
to two sentences maximum) 


. Context and details, as needed, to 
help your client take the action you're 
requesting (bulleted lists are very useful 
here) 


. Call to action that clearly calls out what 
you need from your client, along with any 


timing details 


. Closing that indicates a willingness to 
help or availability on your part, if needed 


Are some people 
‘un-enchantable’? 


There will always be those who refuse 
to be enchanted. It’s true. It happens. 
And it will continue to happen. But in 
my experience, the number of clients 
who can't be enchanted is less than 

5 per cent. For the rest, their lack of 
enchantment often means you haven't 
yet found what makes them happy or 
what they need. 

If they seem unhappy, reach out to 
them and offer to have a conversation. 
This is your opportunity to uncover what 
they really want and possibly learn 
more about them at the same time. 

If they seem disengaged or 
unimpressed, don't jump to the 
conclusion they aren't enchanted. 

If you're unsure, simply ask: “Is there 
anything else | can be doing to help 
you?” You'll be surprised how people 
will open up at that question and 
what a positive conversation this 
can be, even when nothing's the 
matter. That’s enchantment at its 
most engaging. 
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context can be missed. For example, 
maybe your client’s team is getting 
divided into two different organisations 
and that explains why he’s been so 
distracted lately. 

Whenever possible, go to where your 
clients are — and do so regularly and 
informally. There’s a lot of talk about 
getting clients ‘out of their environment’ 
but it’s just as important to also see 
them in their own environment. Maybe 
your client’s always late to your calls 


What is a typical work day like 

for them? 

Where does their project with you 
fall in their list of priorities? 
What’s the biggest challenge in 
their current role? 


If you can easily answer these and 
similar questions, congratulations! 
You know your clients well. 

If you can’t, and want to make 
strides toward client enchantment, 


Go to where your clients are, and do so regularly and 
informally. There’s a lot of talk about getting clients 
‘out of their environment, but it’s just as important 
to see them in their own environment 


because she’s in back-to-back meetings, 
often on the other side of a large 
campus. The more you know about your 
clients and the larger world in which 
they live, the more effectively you’ll be 
able to understand how best to work with 
— and enchant - them. 


Try this 
Pick a few current clients and write down 
the answers to these sample questions: 


you need to spend more time getting 
to know your clients and their particular 
environment. 


Write client-friendly emails 

If your clients are like mine, they 
receive hundreds of work emails per 
day. And for days on end, email may be 
the only form of communication you 
have with them. In that environment, 
how do you make sure your emails get 


read without your client feeling like 
you’re haranguing them? 

You think like a (good) email marketer. 
People open emails from senders they 
trust and like, with subject lines that 
are compelling. Clients are no different. 

Client-friendly emails have: 


Descriptive subject lines 

Don’t write them as categorical topics 
(e.g. ‘Your SEM Campaign’). Instead, 
include high-level calls to action 

(e.g. ‘Your SEM Campaign - what is 
the strategy for December?’ or ‘FYI 
ONLY: Your SEM budget numbers’). 


Scannable body content 

Don’t write a narrative email unless 
your client expects it —- busy clients 
don’t have time to read them. If the 
subject is that complex, schedule a call 
and follow up with an email summary 
for reference. 

Instead, break content into bullets 
or a scannable list wherever possible. 
My rule of thumb is to keep each 
paragraph to roughly two or three 
sentences. If you need more sentences, 
start a new paragraph. 


Call(s) to action 

Don’t pepper your questions throughout 
the body of the email. Do include a call 
to action in every email, even if it’s: 

‘No action needed.’ Your client deserves 
to know what to do with the information 
you’ve provided. 


Try this 
The next time you feel the need to 
write a lengthy email (this often 
happens in project management), 
wtite the email like you normally would. 
Then step away for a few hours. When 
you come back to it, reduce the length 
by 50 per cent, but without sacrificing 
the pertinent information your client 
needs to answer your question or 
understand the situation. Then reduce 
it again by another 25 per cent. It’s 
hard, but it’s possible. 

In the chaos of our busy work lives, 
clients find people who know how 
to communicate efficiently by email 
very enchanting. 


A little enthusiasm Enjoy you 


Look around corners 
My colleagues and I have a philosophy 
we call ‘looking around corners’. It’s our 
description for constantly planning for 
the worst-case scenario. Some would 
call it healthy paranoia - I call it good 
client management. 

Say you know your client is juggling 
seven different initiatives and you 
need his final approval on a design 
you emailed him last week. You have 
a 15-minute phone call with him in 
which to review. Looking around corners 
would be to anticipate he wouldn’t have 
ready access to last week’s email, so as 
a backup you have the design ready to 
share as soon as he joins the call. 


Try this 

Take a pending deadline or deliverable 
and brainstorm five potential worst- 
case scenarios — how could it possibly go 
wrong? Now develop contingency plans 
for each. Make this thinking such an 
ingrained part of your process that you 
do it all the time, and soon you’ll hardly 
be aware you’re doing it. 

Looking around corners means you’ ll 
be in the constant practice of solving 
problems. There are few things more 
enchanting than someone already 
having a solution to a problem that 
hasn’t happened yet. 


Keep your commitments 

Doing what you say you’ll do, when 
you say you’ll do it, is one of the 
easiest and most obvious paths to 
client enchantment. However, it never 
ceases to amaze me the number of 
people and agencies out there that 
don’t do this one simple thing. Short 
of catastrophic events, there’s no 
excuse for not doing what you said 
you’d do. 


Try this 
Keep all your client commitments 
— even the small ones. 


WHERE DO WE GO NOW? 
I believe anyone can achieve client 
enchantment. If you feel like you’ve 
already done so, then on behalf of clients 
everywhere, thank you. Please pass on 
what you know to others. We can always 
use more enchantment in the world. 

If you haven’t yet achieved it, 
start trying out the activities I’ve 
outlined in this article and see how 
they work for you. These are but a 
small subset of the tactics and strategies 
available for enchanting your clients, 
but they’re good starting points. 

Who knows? With enough care, 
customisation and enjoyment, maybe 
you’ll be enchanted, too. 
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Desktop 


Mobile/tablet 


BROWSER SUPPORT 


We feel it’s important to inform 

our readers which browsers the 
technologies covered in our tutorials 
work with. Our browser support 

info is inspired by @andismith’s 
excellent When Can! Use web 
widget (andismith.github.io/caniuse- 
widget). |t explains from which 
version of each browser the 
features discussed are supported. 


EXCLUSIVE VIDEOS 


Look out for the video icon 
throughout our tutorials. 

This issue, three authors have 
created exclusive screencasts to 
complement their articles and 
enhance your learning, including 
Richard Burton's tutorial on 
customising Sketch with plugins, 
and Eric Portis’ guide to building 
sites with responsive images. 
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STEP BY STEP TRAINING 


Lnarn by doing step by step ecerones 
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Exercise Preview 


teercise 40 Rocket Launch: Special tases 


areas of expertise: 
HTML5, SVG, CSS 


q: what did you want to 

be when you grew up? 

a: As akid, | was fascinated 
by dolphins, which made 
me dream about being 

a marine biologist 


Exercise 4: Rocket 
Launch: Special Eases 


Leercue Preview 


Exercise Overview 
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SUPERCHARGE YOUR SV 
ANIMATIONS WITH GSA 


Sara Soueidan explains how to use the GreenSock Animation 


Platform to create an animated SVG banner 


>] Flash has served as the de facto standard for 
banner ads for more than a decade. But today, 
with the absence of Flash support on mobile, Google 
announcing that Chrome will start disabling Flash 
adverts in web pages, Firefox blocki ng Flash by 
default due to security issues, and Facebook’s chief 
security officer calling for Adobe to kill it altogether 
(netm.ag/kill-273), it is clear that the era of Flash 
banners is coming to an end. And it’s time fora 
better replacement. 

HTML5 animations are the perfect successor, 
especially considering how modern browsers 


(2) RESOURCE 


Some online tools 
enable you to 
visually create GSAP- 
powered banners. 
Options include Loxia 
Studio (/oxiastudio. 
com), HTML5Maker 


(htm/5maker.com) aes : . : 

and runbanner handle and optimise animations created using 
(runbanner.com) JavaScript and CSS. SVG also makes an excellent 
E._—_stcoll for creating banners. By animating the content 
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of SVG images, you can create appealing animations 
that look great on all screen resolutions. In this 
article we’re going to animate an SVG banner using 
JavaScript. 


WHAT IS GSAP? 

The GreenSock Animation Platform (GSAP) is a suite 
of tools for creating scripted animations, and it is one 
of the most powerful JS animation libraries available 
today. I don’t work for GreenSock nor have they paid 
me to write this article. I just love the library and 
highly recommend it for the great features it offers. 
GSAP has been around for a long time and comes 
with a mature API that covers the vast majority of 
our animation use cases. 


Speed: GSAP is created with a huge emphasis 
on performance and optimisation, making it 
one of the fastest animation libraries (it’s up 
to 20 times faster than jQuery). Even Google 
developers recommend GSAP for JavaScript- 
based animations. 

Cross-browser compatibility: One of 

GSAP’s best features is that it solves browser 
compatibility issues, so you don’t have to 

fret about browser prefixes, bugs or property 
inconsistencies. It handles all the cross- 
browser bits for you under the hood. 

Refined tools, total control: The number one 
strength of GSAP is its animation sequencing 
capabilities. You can create individual tweens to 
animate just about any property of an element. 
You can also chain tweens into a timeline, 
making it simple to control them as a whole 
and precisely manage their timing in relation to 
each other. You can even nest timelines inside 
other timelines, as deeply as you want. 


GSAP comes with core tools, and there are additional 
plugins that enable you to extend its functionality. 
You only need to add the plugins required for your 
particular project, thus maintaining as small a file 
size as possible. You can find details about all of 
them at netm.ag/details-273. 

GSAP’s Tween Max is a full-featured tool that 
handles the animation of any property over 
time, in addition to providing extra functionality 
by including some of GSAP’s utility plugins by 
default. The focus is on being full-featured rather 
than lightweight. TweenMax also includes all the 


Solutions for Banner Ads 
in the Post-Flash World 


Post-Flash GreenSock has written an article explaining why HTML5 
banners are the future (greensock.com/html5-banners) 


FOCUS ON 


TACKLING C88 
AND SVG PROBLEMS 


Animating SVGs with CSS is similar to animating HTML 

+ elements with CSS, with the one fundamental difference 
that the default origin of the transformation of an SVG element is 
not the centre of that element — it’s the origin of the current user 
coordinate system in use. Most of the time, this is the top-left 
corner of the SVG canvas. 

With that in mind, animating SVGs with CSS should be 
conceptually predictable and fairly simple. However, in practice, 
it is anything but. With IE (and MS Edge) and Opera not supporting 
CSS transforms on SVG elements, Firefox currently not honouring 
percentage-based transform origin values, and Safari breaking the 
sync between percentage-based and absolute-unit-based origins 
(e.g. pixels), animating SVG with CSS becomes unreliable. 

GSAP enables you to animate SVGs with an intuitive, easy-to- 
learn syntax. Behind the scenes, it applies CSS transformations 
to SVG elements where they are supported, falls back to SVG 
transformations using the attribute where they are not, 
and works around Firefox's percentage-based transform origin bug 
(for the juicy details about these obstacles and solutions, read the 


article at greensock.com/svg-transforms). 


GSAP takes support even further by making animations work 
as you would expect them to, even if that’s not how they would 
normally work. For example, it lets you change the transform origin 
of an already-transformed element without the unsightly jumps 
that can be caused by the default behaviour described in the SVG 
specification. You can read more about this at greensock.com/svg- 
tips. This article also includes a video explanation of the problem 
and common solutions and tips for animating SVGs. 


Chrome IE & Opera 


\Y —_ 


Firefox Safari (zoomed) 


. ; 


Browser differences The results of applying exactly the same CSS rotation 
animation to two rectangles in different browsers 
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Banner example The GreenSock team has created quite a lot of animated SVG and HTML5 demos, including banners like this one, on its Codepen profile 


timeline sequencing and controlling capabilities 
we’ll be using throughout this tutorial. 

GSAP can be configured to work with the selector 
engine of your choice — it will even fall back 
to document.querySelectorAll() if you prefer vanilla 
JavaScript. So, unlike many other animation 
libraries, it has zero dependencies. 

Now you’re (hopefully) sold on GSAP’s 
superpowers, let’s put it to practice and see how 
easy it is to create animated banners with it. 


PREPPING THE ASSETS 

For this tutorial, we’ll be animating a (modified) 
banner originally designed by Freepik (netm.ag/ 

banner-273). The image opposite (p87) shows the 
four ‘screens’ of the banner. We’ll be animating 
from one to another in order to create a complex 
overall animation. 

By default, all screens are visible inside the 
banner, stacked on top of each other. Using 
GSAP, the elements are hidden, then animated 
into view and out again so the elements on the 
following screen can animate in. We will be 
breaking the animation down into individual 
tweens, combined into timelines (one for each 
screen) that are then added into one master 
timeline for the whole banner. 

First, we need to include TweenMax in our 
page. We can load it from a CDN: 


<script src="http://cdnjs.cloudflare.com/ajax/libs/ 
gsap/1.17.0/TweenMax.min.js"></script> 


Next, we set the visibility of the SVG to hidden . 
This is something you will find yourself doing 
often. Because the animations will only start 
after the script is loaded, doing this helps us avoid 
a short ‘flash’ of the banner assets before the 
animation starts. 


svg { visibility: hidden; } 
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BANNER 


SURVEY 


We will unhide the SVG again at the beginning of 
the script, right before we run the animations. 


GSAP’S TWEENING METHODS 

To create a simple tween you can use one of GSAP’s 
methods: from(), to() or fromTo(). An example of 
these being used to animate an element might look 
like this: 


TweenMax.from('#element', duration, {property: value}) 
TweenMax.to(‘Htelement’, duration, {property: value}) 


The from() method basically tweens backwards - 

you define the beginning values (in the tween) and 
the current values are used as the destination values. 
This is great for doing things like animating objects 
onto the screen, because you can set them up the 
way you want them to look at the end of the tween, 
and then animate in from elsewhere. This is exactly 
what we are going to do for our banner screens. The 
to() method will animate the target element from its 
current state to the destination values you define. 
Hopefully, fromTo() is now self-explanatory. 

These methods are used to define a single tween 
(which might be animating multiple properties). 
These tweens can then be appended to one timeline 
so they execute sequentially: 


var tl = new TimelineMax(); /* create a timeline */ 
tl. from('#element', duration, {property: value}) 
from(‘#element', duration, {anotherProperty: value, ease: 
easingFunction}) 
.to(‘HtanotherElement', duration, {someProperty: value, 
someOtherProperty: value, delay: value}) 


You can add as many tweens as you want and those 
tweens can be applied to one or more elements. 

The timeline will play these tweens in the order 

you specify. The more complex your animations, 

the more scenes they will include. Each scene would 
be a series of ‘micro’ animations (the tweens) that 


happen at some point along the main timeline. It is 
possible to have tweens overlap and play relative to 
each other’s time. 

You can also combine timelines into one master 
timeline. This is achieved by using TimelineMax’s 
add() method to literally add the timelines into 
the master timeline. These timelines can then 
be controlled just like individual tweens can. 

For our animated banner, we will create four 
different timelines (one for each screen), and then 
these four timelines will be combined into one 
master timeline: 


Add as many tweens as 
you want to a timeline, 
and apply them to one 
or more elements 


var master_tl = new TimelineMax(); 

master_tl.from('svg', .2, {autoAlpha: 0}) /* show the hidden 

SVG first */ 
.add(animateScreen1()) 
.add(animateScreen2()) 
.add(animateScreen3()) 


.add(animateScreen4()); 


Each of the functions inside the add() method 

will be used to define and return a timeline, which 
makes this sequencing possible. The autoAlpha 
property is the same thing as opacity except that 
when the value hits 0, the visibility property will be 
set to hidden in order to improve browser rendering 
performance and prevent clicks or interactivity on 
the target. 


ANIMATING ELEMENTS INTO VIEW 

We want to animate the screens into view so that 
they appear as if they were initially off-canvas. 
We’ll be using GSAP’s from() method to define 
where they will animate from. Let’s start by slide- 
fading in the text from the left. 

First we create and return a timeline inside 
the animateScreen1() function, then we add to it 
the tween that will animate the text into view. 
You need to make sure you give the elements 
you want to animate proper class names and/or 
IDs for reference. 


function animateScreen1() { 

var tl = new TimelineMax(); 

tl.from('#Banner1-text', .6, {opacity: 0, xPercent: "-100%", 
ease: Power3.easeOut}) 


return tl; 


The text is animated in from a -100% position 
(which means it is translated to the left, outside 
the banner’s visible area) and opacity value 0. 
We’ll get to the easing function part later. 

Instead of translateX and translateY ,GSAP uses x, 
y and xPercent and yPercent to apply a translation 
to an element. You can learn about the difference 
between them in this video tutorial from Petr 
Tichy (netm.ag/x-273) or this blog post from 
GreenSock (netm.ag/x2-273). 


SYNCHRONISING TWEENS 

We want to fade the world map into view at the same 
time the text animates in. This is possible by using 
‘labels’ inside the timeline. A label defines a point in 
time when the animation will start, and can be used 
in multiple tweens inside the timeline in order to 
play those tweens at the same time. 


tl.from('#Banner1-text', .6, {opacity: 0, xPercent: "-100%", 
ease: Power3.easeOut}, "first") 
from('#Banner-world-map’, 1, {opacity: O}, "first") 
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Banner plan The four scenes making up the banner. Each of these screens 
will be animated sequentially 
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RESOURCES 


FURTHER READING 


+ There are plenty of resources to help you get to grips with 
both GSAP and SVG. Here are my favourites: 


GSAP: Step by step training 

nobledesktop.com/books/gsap 

This is the official workbook on GSAP. It’s written by Carl Schoof, 
one of the two creators of GSAP, and it's a superb place to get 
started with GSAP because you get to learn by doing. There are 
exercises that will teach you everything you need to know to start 
using GSAP in your projects today, all from the ground up. 


GreenSock website 

greensock.com/get-started-js 

This contains the best GSAP documentation and starting guide. 
The online guides include code examples, CodePen demos you can 
play with, interactive demos for getting a feel of the GSAP features, 
as well as videos that explain them in an extremely easy-to- 
understand manner. 


A compendium of SVG information 
css-tricks.com/mega-list-svg-information 

If you want to explore further, Chris Coyier has collected a list of 
resources for learning SVG on CSS-Tricks. 


SVG Essentials 
netm.ag/essential-273 
If you prefer printed material, this book by J. David Eisenberg and 


Amelia Bellamy-Royds is an excellent beginner-level guide to SVG. 


My first SVG banner ad 

netm.ag/gannon-273 

Chris Gannon has written a case study about how he created an 
SVG-only banner using GSAP for the animation. He shared a lot of 
great insights, tips and lessons learned in this blog post he wrote 
on CodePen. His profile is also full of GSAP-animated SVG examples 
and worth checking out. 


Creating an HTMLS5 banner ad with GreenSock 
netm.ag/lynda-273 

This video tutorial on Lynda.com explains how to create 
GSAP-powered ad banners. 


Sara Soueidan website 

sarasoueidan.com 

| write about SVG quite a lot, so I'm sure you'll find something 
useful here. 
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You can call the label anything you like. Here, 
I’ve chosen "first" because it’s the first point in 
time, so to speak. 

GSAP’s labels can also be relative: you can use 
a label that specifies when to start a tween relative 
to the preceding tween. For example, you could use 
a "+=1" label that indicates that the current tween 
(or timeline) should start animating one second 
after the preceding one finishes. 


STAGGERING ANIMATIONS 
If you want to apply the same animation to multiple 
elements in sequence, you can leverage GSAP’s 
staggering functions. This saves you from writing 
multiple instances of the tween for all those 
different elements. 

In the first screen, there are two sets of 
icons: a monochrome set and a coloured set. 
Each set is a group (<g> ) which in turn contains 
other groups, one for each icon’s contents. We 
will use the staggerFrom() method to define 
a tween that will be applied to icons in each 
group. This method will ‘pop’ the icons in one 
after the other: 


.staggerFrom("#monochrome-icons > g", .2, {scale: "0", 
opacity: "O", transformOrigin: "50% 50%"}, 0.1, "second") 


The numerical value right before the label (here 
"second" ) is the stagger value. This indicates the 
amount of time in seconds by which to stagger 
the start of each tween. 


SPECIFYING EASING FUNCTIONS 

When the second screen is to be animated into 
view, the function responsible for that animation 
first needs to remove the elements of the previous 
screen. The second animation will be defined in the 
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HTMLS5 With the help of GSAP's plugins, you can create impressive HTML 
text animations, like the GreenSock homepage banner 


animateScreen2() function, and will use staggerTo() 
to animate the first screen’s elements out: 


function animateScreen2() { 
var tl = new TimelineMax(); 
//start by removing scene 1 elements 
tl.staggerTo("#monochrome-icons, #colored-icons > g, 
#mobile, #tablet, #desktop", 0.3, {x:"+=200", autoAlpha:0, 
ease:Power2.easeln}, 0.03) 
.staggerTo('#Banner1-manage, #Banner1-projects, 
#Banner1-text', 0.5, {attr:{x:-200}, autoAlpha:0, ease:Power2. 
easeln}, 0.1, "-=0.5") 
.to('#Banner-bg', .6, {fill: "#D1F2F8"}, "-=0.2") 
//animate the second scene 
.add("first", "-=0.6") 


tl.delay(.5); 
return tl; 


} 


The easing function specified for the ease property 
( Power2.easeln ) is used to create more elasticity, thus 
adding to the overall fluid effect. GSAP comes with 

a big bunch of built-in easing functions. Learn all 
about them in the docs: netm.ag/ease-273. 

The tl.delay(.5) part is there to delay the execution 
of the animation. The reason we’re delaying it is to 
give the user some time to read the contents of the 
first scene before we get to the other. The banner 
would be useless if the animations stood in the way 
of the message being read. .add("first’, "-=0.6") enables 
us to create overlap by tightening the time between 
the previous and following tween. 


SPECIFYING SVG TRANSFORM ORIGINS 
The code for the third screen looks similar to that 
of the previous screens, with the exception of a new 
property that is used to animate the clock’s hour 
and minute hands: 


function animateScreen3(){ 
var tl = new TimelineMax(); 
tls 
from(‘#hours', 2.4, {rotation: "360", svgOrigin: "496.5 
53.2", ease: Power0O.easeNone}, "first") 
from('#minutes’, .6, {rotation: "360", svgOrigin: "496.5 
53.2", ease: Power0.easeNone, repeat: 3}, "first") 


return tl; 


You can specify the transform origin of an SVG 
element using either a percentage value (relative 
to the element’s bounding box) or an absolute 
value (relative to the entire SVG canvas). The 
latter is specified using the svgOrigin property. 


Loxia Studio Animations 
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Helpful tools Online tools such as Loxia Studio enable you to visually create GSAP-powered banners 


Sometimes it can be useful to use svgOrigin instead 
of transformOrigin . 

Since both clock hands were being animated 
relative to the same point on the canvas, I’ve 
specified the coordinates of that point as the 
transform origin for both of them. 


USING BEZIER TWEENS 

In the last screen, we have a line of text that is 
divided into multiple <tspan> elements — one 
wrapping each word, and a call-to-action. The 
best we can do here is to animate the visibility 
of the words. 

That said, if you are creating an HTML5 banner 
that animates HTML text, you can create extremely 
impressive text animations using GSAP’s plugins. 
GSAP’s homepage banner (at the bottom of 
the facing page) is a great example of that. You 
can check its code out at netm.ag/home-273. 

To create a wiggly effect for the call to action 
button, we want to rotate it to the left and right 
a few times in a row. Instead of using multiple 
rotation tweens, we can use the Bézier plugin to 
move the values through a certain set smoothly, 
thus avoiding the jerky effect that could result 
from individual tweens. 


.to(‘#call-to-action’, 0.9, {transformOrigin: "50% 
200%", bezier:[{rotation:-10},{rotation:8},{rotation:- 
5},{rotation:3},{rotation:0}], ease:Power2.easelnOut}, "+=0.3") 


Provide the bezier object with an array of values 
and it will animate through them smoothly. Could 
it get any simpler? 


SUMMING UP 

GSAP’s powers really shine when you start creating 
sequenced, complex animations. All its sequencing 
and time control features make it an indispensable 
tool in our animation toolkit today. So go ahead, 
take GreenSock for a ride and propel your animation 
powers to the next level. 


(2) RESOURGE 


Petr Tichy has recently 
created an online video 
course for animating 
SVGs with GSAP. He 
also frequently writes 
about GreenSock and 
sometimes does live 
deconstructions of 
sites using GreenSock 
for animation. 
ihatetomatoes.net 
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q: what did you want to 
be when you grew up? 

a: A geologist or an 
archeologist, so | wouldn't 
be confined to the indoors 
.. oops! 


DESIGN A PORTFOLIO 
THAT PACKS A PUNCH 


It can be tricky to make your portfolio stand out from the crowd. 
Marc Anderson walks through how to make your work shine 


e& I look at a lot of portfolios every day in my 
job at Fantasy, spanning a wide range of 
disciplines and talents. Because there are so many, 
I’ve had to develop a strategy to enable me to quickly 
tell whether a designer has both the visual talent 
and UX thinking to thrive with us. In short, a way 
of separating good work from work that simply 
looks good. 

There are plenty of great platforms and tools 
out there to help designers display their work 
beautifully. Tools like Semplice, Cargo, Squarespace 
and Readymag all offer templates that feature 
gigantic imagery and enable users to build in 
engaging interactions. 
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The problem is that these platforms look so 
great out of the box that they can easily mask 
the true talent level of the designers using them. 
Grabbing a nice photograph of a car might make 
for an arresting project marquee, but if the work 
that follows isn’t as interesting, it'll be clear to me 
that the designer has put more effort into making 
a portfolio than they put into the work featured 
in that portfolio. 

What follows is a how-to version of the mental 
checklist of elements I look for in a great portfolio. 
Not every single one of these is required, but the 
best portfolios I see include the majority of these 
ingredients. Let’s get started ... 


The first step is to select 
projects that you think are 
the best indication of your talent. 
A well-curated body of work is the 
first indicator that an individual 
can decipher good from bad. We 
have all taken on projects that 
didn't have a favourable outcome, 
but guess what? You don't have to 
advertise them! A single piece of 
bad work can undermine an entire 
portfolio. It demonstrates a lack of 
taste for only the best quality. 


Choose pieces that hint at 
cel 


work you'd like to do in the 
future. Many designers believe their 
portfolio is an archive of the work 
they have completed in the past. 
While this is true, it should also be 
a springboard from which to win 
future opportunities. | often hear 
from potential clients who like 
pieces in my portfolio and want to 
talk about related projects, proving 
that it’s advantageous to show the 
kind of work you'd be happy to do 
more of moving forward. 


A great way to show your 


abilities is to developa 
personal project showcasing 
how you might approach design 
for an existing product or brand. 
| love looking at personal projects 
because they demonstrate a 
designer's talent when they’re 
free from the constraints of 


TreCanceet 


demanding clients and business 
needs. However, because this 
work is created in a bubble, it 
should be clear to your audience 
that it is not client-driven, and is 
not an indication of your ability 
to solve problems stemming 
from client feedback. 


If you include personal 
projects, avoid redesigns 
for brands with a strong design 
presence. Nike, Apple, Burton: these 
are all brands with a strong heritage 
and even stronger design language. 
They have already set the tone and 
style for any work created for them, 
and anything unsolicited would 
blend in with their current work 
regardless of how innovative it 
may seem. Instead, either focus on 
solving a usability problem with an 
existing product, or select a brand 
that is not as ubiquitous. 


Before even approaching 
the computer, determine 
how you are going to talk about 
each piece of work. Where did this 
piece start? How did you embark 
on the process? Where did you look 
for inspiration? How did the design 
take shape? Were there any hurdles 
along the way? What were the 
results? These are all questions 
that should be answered in order 
to demonstrate critical thinking 
in your creative process. 


Step 2 Present examples of the type of work you'd like to do more of in the future 


CJC 


Dots WET Go 
: oe 


Step 7 Gather material that shows your creative process, such as initial sketches 


06 | Each piece within your 
portfolio is a’story’ and 
should be laid out in a proper arc. 
Where did the project begin? How 
did you respond to the task? What 
was the final solution? How and 
where was your solution carried 
out? All of these questions need to 
be answered in the proper order for 
easy consumption, so your viewer 
can get a sense of the wider scope 
of your involvement and expertise. 


Gather artefacts from your 
process. | love seeing and 

hearing about the creative process 

of other designers and geeking 

out over sketches. In addition 

to collecting pixel-perfect final 

artwork, consider including 

any work you did along the 

way. Any colour explorations, 

photographs and so on, tell me 


that you look for inspiration outside 


of Photoshop and work through 
various problems or roadblocks 
to get to a final solution. 


08 | Think of your audience 

as aclient ina design 
presentation. How did you get to 
typographic decisions or colour 
choices? Did you thoughtfully 


approach the use of a grid? How 
does your framework scale to 


SAVE YOUR 
SOURCE FILES 


Be sure to save your 
design source files from 
past projects! With 
these you can create 
large, beautiful marquee 
images from your work 
- a straightforward way 
to keep your portfolio 
fresh with each update. 
Plus, as phones and 
devices evolve over time 
it’ll be worth updating 
the contextual imagery 
on your site to match, 
even if the work was 
created long ago. 
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p ‘multiple devices or increased 


amounts of content? Including 
these steps helps justify your final 
design choices and gives depth to 
the work overall. 


09 | If your portfolio contains 
interactive work, show your 
thinking behind how elements on 
screen behave when the user is 
present. This will transform your 
design from simply a nice layout 
to an immersive experience. Think 
too about how your interactions 
are unique to each project, and go 
above and beyond the work others 
have seen before. This will help 
your audience see how the piece 
functions overall, even without 
having to experience a live 
demonstration. 


Simple prototype animations 
1 
or animated demo videos 


add a tremendous amount of value 
to your projects. These should not 
take the place of a well thought-out 
story told through design, but they 
go along way in conveying the 
interactions, interesting movement, 
and spacial relationships that flat 
comps just can't. These should 

be used sparingly and placed 
thoughtfully so as not to interfere 
with the project story’s flow. 


Interactive projects are 
often in-depth explorations 
of complicated processes and 
interactions. When selecting which 
elements of your projects to focus 
on, be sure to show any processes, 
even if they aren't the flashiest 
elements. They will help your 


SAY CHEESE 


Step 10 Careful use of video or animations can add great value to a project story 


audience see how you think through 
complex design and interaction 
problems while still working to 
maintain a quality product. 


While I've discussed including 

a number of visuals for 
process and function, it is important 
to consider the presence of each 
visual you select. A tight portfolio 
has very little fluff and doesn’t try 
to distract the viewer. 

A good example is the ubiquitous 

‘grid of devices’. Sometimes it 
may be relevant to demonstrate 
that a product works on multiple 
platforms or screen sizes, but more 
often than not this is unnecessary 
visual candy. | suggest avoiding it 
unless you have astrong argument 
to the contrary. 


Dashboard 


Do the work justice, don't 


hide it behind flashy imagery. 


Just as images of designers holding 
posters were popular years ago, 
now it has become popular to 
show design work angled in three 
dimensions. This serves no purpose 
other than to distract your viewer 
from how good the work really 

is. Reserve angles to show 
frameworks and how elements sit 
in relation to each other within the 
context of the overall design. 


Give context to each 
piece. This is a tricky one, 
and should be considered ona 
case-by-case basis. Interactive 
design always exists within the 


context of a browser, television, 
or mobile device. Consider showing 


Get a nice headshot! This may sound a bit narcissistic, but if you are looking to gain 
further traction as a designer it will be important to appear professional, friendly 
and approachable. It doesn’t need to be fancy, but you should have a photo where 
you are the focus of the image, there is an uncluttered background, and the size is 
large enough to work both in print and on the web. 
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at least one design within the 
context of the key device it would 
live in to give an indication of the 
scale of the elements and their 
relationship with the edge of 

the screen. 


Labour over the creation of 


each asset in the same way 
you laboured over the work to begin 
with. This is the most tedious part 
of creating any portfolio, but by far 
the most important! As muchas a 
portfolio shouldn't get in the way 
of the designs within, any design 
elements applied to the portfolio 
itself should be considered with the 
same attention to detail that you 
give all of your projects. That goes 
for typography, imagery, colour 
choices and so on. 


16 | Consider the platform where 
you will showcase your work. 


Will it properly convey each piece’s 
story? Will it easily scale with 
additional projects? There are 
several to choose from these days 
— Squarespace, Semplice and 
Readymag to name a few — and 
each have their pros and cons. 
Before committing to a platform be 
sure to test each option and look at 
examples to ensure you are moving 


Step 12 Avoid fluff - a grid of devices rarely adds to the project story 


forward with the best solution for 
you and your work. 


Look for additional outlets 


to show off your projects and 
point of view. If you've created work 
that has an interesting story behind 
it, consider writing a Medium article 
about your process and approach. 
There you can give an account of 
your work in greater detail, and 
increase your presence to a broader 
audience. You never Know, this 
might create leads you hadn't been 
exposed to previously. 


Solicit friends and colleagues 


for feedback. As many of 
us consider our work extremely 
personal, this step is frequently 
overlooked. However, asking an 
objective outsider to cast an eye 
over your portfolio can be incredibly 
useful. Just like with professional 
career criticism, it can help you push 
your work to the next level. It will 
also help you gauge if your project 
stories are understandable and 
clear to outsiders, which is key if 
you want others to reach out 
to you once it has launched. 


working at F 


Hello! | am a design 
in New York Ci 


sed 
u ly 
a 


Step 19 Don't forget to introduce yourself — a little personality can go a long way 


Step 13 Angled devices might be in vogue right now, but this approach can be distracting 


Don't forget to tell your 


own story as a designer! 
This is a hotly contested aspect 
of every portfolio: just how much 
personality should you show? 
| lean toward liking less ‘quirkiness’ 
or forced creativity, and instead 
look for a quick summary of the 
creative's professional background. 

This element is often an 

afterthought; just a paragraph of 
text or a link to LinkedIn. You might 
try putting together a simple case 
study about you, highlighting work 
experience and clients, presented 
in an easily digestible, strongly 
typographic way. 


Share it everywhere! After all 


that hard work you deserve 
to be alittle obnoxious. There are 
all the usual outlets for creatives, 
but design is inherently about 
solving problems for businesses 
outside the design community. Find 
people and places to share your 
work with who don’t work in your 
industry. Do they understand your 
approach? Are they interested in 
your work? It just might lead to 
another great project and ultimately 
an addition to your portfolio. BY 


REATE A 


CASE STUDY 


Case studies are a great 
method for creating a 
single, self-contained 
story about each of your 
projects. A well-designed 
case study tells the story 
of a project within the 
context of the brand, 
and is in itself a piece 

of design. Once you’ve 
created a case study you 
can then easily post it on 
Behance or attach it to 
Dribbble to get greater 
exposure amongst your 
peers, recruiters and 
potential clients. 
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be when you grew up? 

a: When | was six, | 
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[:) RESOURCE 


Find the code for 
Itinerant Jenkins at: 
github.com/ericmann/ 
itinerant-jenkins 


AUTOMATE YOUR 
PRODUCTION TESTING 


Eric Mann walks through how to use Jenkins to automate your 
production test suite, helping to ensure you ship bug-free code 


Mark was excited. Just one more ticket to close 

and he could duck out early for a weekend on 
the lake. Just him and the fish: no Wi-Fi, no IDE, no 
client meetings. Three lines of code and the bug 
would be patched. A Git push and the new code would 
be online and the client would be happy. Simple. 

Mark loaded his local dev site to confirm those 
three lines fixed the bug. Success! He wrote a quick 
commit message and pushed the code up the chain. 
Mark smiled as he shut the lid of his laptop, already 
thinking about the last-minute items he needed to 
pack for the trip. Next stop: freedom! 

Except the code now living in production only 
worked on Mark’s machine. A library required by the 
project had been accidentally gitignore -d and, while 
it happily ran for Mark, never made it to the server 
during his deployment. The site updated, crashed, 
and Mark’s team went on red alert immediately when 
the client panicked. It took all weekend to track 
down the missing file. On Monday morning, Mark 
came home to an angry dev team, an angrier client, 
and a sudden impulse to refresh his resume. 


HORROR STORIES 
This story might seem fictional but, aside from 
‘Mark; it’s one that I, like most developers, have 
experienced many times, from both sides of the team. 
But solutions are lacking. Instead of real changes to 
our infrastructure, we try to teach good behaviours. 
As a policy, all code must be peer-reviewed before 
being checked off in the ticketing system. No 
deployments are ever made on a Friday. Engineers 
have to earn the right to work on the master branch. 
These protections are a noble first step to solving 
the problem. Unfortunately, humans make mistakes, 
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steps are skipped when deadlines loom, and dictated 
behavioural practices usually prove to be mere Band- 
Aids that often fail to stop the bleeding. 


CONTINUOUS INTEGRATION 

A better solution is to remove human error from 
the equation and automate these pre-deployment 
best practices. Through unit testing, we can be 
absolutely sure that any changes in our code don’t 
break the build before it ships. Typos triggering 
white-pages-of-death or server-side 5XX errors 
become a distant memory. Stack traces printed 
above call-to-action forms are a thing of the past. 
Requiring unit tests helps ensure projects work 
correctly before anything ever leaves a developer’s 
machine - most of the time. 

Unit testing is great for automatically ensuring the 
integrity of code on one machine, but it falls short of 
fixing the “it worked for me” issue illustrated above. 
Rather, we need to distribute our testing code to the 
entire team while also ensuring it’s actually run in 
multiple environments. 

Enter Jenkins (jenkins-ci.org), an open source 
continuous integration server. Thanks to Jenkins, a 
common build server sits between the team and the 
production environment, automatically testing every 
commit before it goes live. Jenkins can also enforce 
generally accepted best practices in code quality. 


HOW IT WORKS 

Code can be as broken as it needs to be locally, but 

once a commit is pushed up to a central repository, 

Jenkins runs your build processes automatically. 
Jenkins runs unit tests to inspect code 

functionality. It can also run code linting tools to 


analyse code style and performance. It can even 
generate API documentation so the team (or external 
contributors) can keep up with project progress. 


DETERMINING WHAT TO AUTOMATE 
Before any workflow can be automated, you have 

to establish a consistent checklist of actions. Not 
everything has to be automated right away: your 
checklist could be as simple as just running a code 
linting tool. Start with the most frequently executed 
tasks. They consume the most time and will be the 
largest early automation win. For a PHP project, this 
task list probably includes: 


@ Run all unit tests for the project 

@ Run PHP_CodeSniffer to ensure code quality 

@ Run phpDocumentor to generate documentation 
for your API 

@ Push toa gh-pages branch on GitHub 

@ Runa Selenium test suite to validate UX delivery 

@ Deploy the code to the production database 


If Jenkins encounters a failure in any of the steps 
above, it can - and should - immediately halt the 
build and notify the team that something is wrong. 


ITINERANT JENKINS 

While the first step in the build process above might 
be testing, the first step in automation is, of course, 
to install Jenkins. For this, my team has put together 


Thanks to Jenkins, 
every commit is 


automatically tested 
before it goes live 


a simple tool that allows for the quick construction 
and deployment of disposable Jenkins servers: 
Itinerant Jenkins (github.com/ericmann/itinerant- 
jenkins). The tool can run either locally (powered by 
a Vagrant server) or on a remote machine thanks to 
some general-purpose provisioning scripts. 


RUNNING LOCALLY 


To run Itinerant Jenkins locally, just: 


@ Install Vagrant (vagrantup.com) and VirtualBox 
(virtualbox.org) 

@ Clone the repository from GitHub (github.com/ 
ericmann/itinerant-jenkins) 

@ From within the newly-created folder, 
run vagrant up 


The project will use Vagrant to download and create 
a new Ubuntu VM on your local machine. Then it 
kicks off an Ansible-powered provisioning system 
to install Jenkins. Jenkins can be configured to run 
tests for any framework in any language. Out of the 
box, though, the Itinerant Jenkins project gives you: 


@ PHP 5.6 (CLI) 

@ XDebug (xdebug.org) 

@ Composer (getcomposer.org) 
@ PHPUnit (gphpunit.de) 

@ phpDocumentor (phpdoc.org) 


Once the provisioner completes, you’ll have a fully- 
functioning Jenkins server running on http://jenkins. 
dev:808o. Itinerant Jenkins pre-installs plugins 

to support PHP unit testing and code coverage 
reports, too! 


RUNNING REMOTELY 
Itinerant Jenkins also allows you to spin up a remote 
build server with ease. If you’ve cloned the repository 
locally, you’ve got everything you need already. 
Just find an Ubuntu server somewhere (Rackspace, 
Digital Ocean, Linode, and so on) and make sure that 
you have a user account with passwordless 
sudo capabilities. 

Next, run the following command from your 
Itinerant Jenkins directory: 


bin/deploy {user}@{host} 


Itinerant Jenkins will use SSH to push the same 
Ansible provisioning tools used by Vagrant to the 
remote server and will kick off a remote build to 
install Jenkins and its tools for you. 

Once the deployment script completes, you’ ll 
have a fully functioning Jenkins server running 
at http://{host}:8080. 


NEXT STEPS 

Itinerant Jenkins is meant to be disposable, but 
Jenkins itself is indispensable. You can use the 
tool to quickly provision and deploy build servers 
anywhere, for any team, and for any project. 

Once Jenkins is up and running, your next step is 
to gradually work through your build check list and 
shift the burden of each task off your team and onto 
your new teammate. Humans can and will forget 
steps - and break the build in the process. 

Jenkins, though, runs every task without 
complaint every time without fail. Through 
continuous integration, you move one step closer 
to every developer’s dream: only ever shipping 
bug-free code. 
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[2 FACT FILE 


BETTER TOGETHER? 
It's possible to use 
React and Web 
Components in 
combination. In fact, a 
presentation at React 
Conf in early 2015 
suggested just that: 

in ‘Complementarity 

of React and Web 
Components’ (netm.ag/ 
rota-273) Andrew Rota 
shows how you can use 
the two together. 


REACT VS WEB COMPONENTS 


React and Web Components help you break your web app into 
independent modules. Pam Selle compares the two 


REACT 


WEB COMPONENTS 


React (facebook. github.io/react) is a library from 
Facebook focused on ‘the V in MVC’. In it, you build 
‘components’ (reusable views tied to state) to make up 
your application. As the state changes over time, the 
component will update. 


GOALS AND APPROACHES 


A React application is composed of individual, 
encapsulated components. You define your 
component completely in JavaScript, and commonly 
use JSX (a syntax extension to JavaScript) to write 
HTML-like structures in your JavaScript, to be 
rendered on the client. 


PERFORMANCE AND SIZE 


React outperforms other JS libraries on rendering 
performance, as it updates the DOM ina different 
way. Rather than ‘dirty checking’ to update views, 
it leverages a ‘virtual DOM’ to avoid the expense 
of constantly modifying a page's DOM. 


COMMUNITIES 


React puts lots of energy into its community efforts, 
with conferences, newsletters and blogs. The release 
of React Native, which allows you to write a React 
application and ship for iOS (and soon Android) has 
generated a lot of excitement. 


ARCHITECTURE 


Flux is the recommended architecture for React apps, 

consisting of the dispatcher, stores and views. You can 
use Flux as a framework itself. Alternatively, there are 
many frameworks that implement a Flux architecture 

for you, a popular example being Redux. 


VERDICT 


While both help you modularise your views into smaller components, React is further 
along in community adoption, and as it's not a standard, it’s not blocked by the question 


Web Components (webcomponents.org) are a group 
of standards that are commonly polyfilled (adding 
the functionality to non-supporting browsers) using 
webcomponents,js. These standards are custom 
elements, HTML imports and the shadow DOM. 


Think of Web Components as a folder containing 
a really small web page — in fact, just a single 
component. A web component includes its own 
markup, behaviours and API (JavaScript), and 
presentation (CSS), unaffected by the surrounding 
DOM, unless otherwise specified. 


While Web Components are available in Chrome and 
Opera, the polyfills are fairly large (around 163KB, 
according to the Polymer team). Polymer, a popular 
library from Google based on Web Components, does 
allow you to separate out modules you want. 


Being a standard, the closest thing to a central 
community around Web Components adoption is 
the Polymer library community, which is heavily 
tied to Google events such as I/O and the Chrome 
Developer Summit. 


There's no standard architecture or organisation 
prescribed around Web Components, as it’s a 
standard, not a library per se. There's opportunity 
for a framework or architecture to arise and develop 
a standard of best practices. 


of browser support. Web Components are a standard to pay attention to and familiarise 
yourself with, but aren't necessarily production-ready due to the weight of the polyfills. 
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a: Professional Teenage 
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[>] VIDEO 


Eric Portis has created 


an exclusive screencast 


to go with this tutorial. 


Watch along at netm.ag/ 


rwdvid-273 


View source 


files here! 


BUILD SITES WITH 
RESPONSIVE IMAGES 


Eric Portis walks through the new markup designed to help 
devs build performant, responsive sites with content images 


>] Progressively enhanced pages with responsive 
layouts transform themselves to meet myriad 
users’ myriad needs. A thoughtfully built page serves 
up quality experiences to everything from feature 
phones to 5K screens, becoming as rich and complex, 
or as fast as lean, as its context dictates. 

That’s the theory, anyway. In practice, the number- 
one thing holding back an efficient, adaptable web 
has been content images. Images delivered via the 

<img> element have traditionally been limited to 
a single src. Fixed in resolution, content and format, 
these src s are weighing down the responsive web. 

Thankfully, new markup allows us to send 
different sources to different devices. This doesn’t 
just solve the biggest performance problem on 
the responsive web, it also opens up new avenues 
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for experimentation in frontend engineering and 
visual design. Now that we’ve broken the tyranny 
of the single src , our images can respond to as 
many different contexts as we can imagine. 

Let’s dive in with an example. A Comic Natural 
History of the Human Race, penned by Henry Louis 
Stevens in 1851, was the first American book of 
caricatures and the first American book to feature 
chromolithographic printing. It’s a weird, funny, and 
technically innovative book of images. Let’s give it 
the web treatment it deserves (find a demo of what 
we're creating at netm.ag/demo-273). 


WORKING WITH SCRSET 
We’ll start with the homepage, which contains fixed- 
width thumbnails of each illustration. We want these 


Comic history Henry Louis Stephens’ original A Comic Natural History 


thumbnails to look crisp on hi-DPI (aka Retina) 
devices, and load as quickly as possible on standard 
screens. Until recently, we have had to pick one of 
these two contexts to optimise for. New markup 
allows us to have our cake and eat it too: 


<img src="the-woodpecker/thumb.jpg" 
srcset="the-woodpecker/thumb@2x.jpg 2x" 
alt="A woodpecker with a man's head" /> 


We leave our 1x resource in the src and render a 
separate 2x resource, which we mark up using a new 
attribute: srcset . You may be wondering, why the set 
part? Because we can stick as many resources in there 
as we please, separated by commas: 


<img src="standard.jpg" 
srcset="retina.jpg 2x, 
super-retina.jpg 3x, 
wtf-retina.jpg 4x" 
alt="My god, it's full of pixels!" /> 


Those little 2x s and 3xs sort of look like little 
media queries, don’t they? Perhaps they’re a kind 
of shorthand? Nope! Media queries make true or 
false statements about the browsing environment 
and provide the browser with an explicit set of 
instructions. srcset descriptors simply describe 
resources. When we put a 2x next to a resource, 
we’re not giving the browser an instruction about 
when or whether to load it. We’re simply stating 
it has an ‘image density’ of 2x. 


IN-DEPTH 


BROWSER SUPPORT 
AND FALLBAGKS 


+ Thanks to the extraordinary efforts of developer Yoav 
Weiss, Blink-based browsers were the first to support 
responsive image features. Chrome (v39) and Opera (v30) 
began shipping with full support last autumn, and support 
trickled down into Chrome for Android soon afterwards. No 
version of the stock Android browser (which shipped with 
Androids <5) supports the markup. 


Firefox 

Firefox 38 began supporting the new syntax in May of this year. 
Mozilla's implementation contains one notable flaw: it doesn't 
yet re-evaluate responsive images in response to resize events. 
A patch has landed in the beta channel, and should ship in version 
42 in November 2015. 


Safari 
Mobile and desktop Safari have supported with 
descriptors since version 7.1 and version 8.3 respectively; support 


for fg descriptors will land this autumn after the release of Safari 
9 and iOS 9. Apple have made no official statements about 
but there are positive signs. 


Internet Explorer 

No version of Internet Explorer supports the new markup, 
but Microsoft's just-released Edge browser supports 
descriptors, and both {i descriptors and the picture element 
are officially ‘in development’. 


Non-supporting browsers 
All the new features build upon our familiar friend Fees 
This ensures that non-supporting browsers will simply ignore 
the new stuff and load the isis, Same as they always have. 
If, however, you want to polyfill support for the new features, you're 
in luck: Picturefill.js is a superb, actively maintained, thoroughly- 
tested 6Kb library that'll do exactly that. 

It's not without its gotchas though — because browsers 
start loading images before they run any JavaScript, when using 
Picturefill you'll have to either omit src or risk burdening users 
with double downloads. Find out more at netm.ag/picturefill-273. 
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FOCUS ON 


THE MEDIA ATTRIBUTE 


On the Comic Natural History site, we use and 
for their type-switching prowess. They have another 
trick up their sleeve, though: the attribute. 


<picture> 
<source media="(min-width: 20em)" 
srcset="full-image.jpg" /> 
<img src="cropped.jpg" 
alt="Sometimes, less is more" /> 
</picture> 


lets us supply the same image at a range of resolutions, 
and gives the browser the leeway to choose whichever resource 
it wants. But sometimes we'll want to supply resources with 
alternate content, and make sure that those alternates are 
always loaded in certain browsing environments — no ifs, 
ands or buts about it. 

For instance: maybe we want to supply a black-and-white 
version of an image for printing, or a cropped version for 
small screens. That's called art direction, and that’s what the 


media E:laag [nema <source media> MMelnes(esimiices <SOurce 


— the first that has a media attribute that 
matches the current environment wins, and its is sent 


to the Rs ES) 


Today, attributes are mostly being used to send alternate 


crops, but | believe we've only just begun to explore what can be 
done with them. In ‘When Responsive Images Get Ugly’ (netm.ag/ 
ugly-273) Taylor Hunt uses to replace animated GIFs with 
poster images on ereaders whose slow screens turn the GIFs to 
mush. In another example, he alters images based on the device's 
ambient light sensors, so that a floor plan remains legible and easy- 
to-read in both bright sunlight and at night. Exciting stuff! 


Focus in Alternate crops enable users to focus on the important 
part of an image at any screen size 
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What’s an image density? I’m glad you asked! It’s 
the number of pixels a resource has, relative to its 
layout size. More precisely: Resource width (in pixels) 
+ the <img> ’s width on the layout (in CSS px) = image 
density (e.g. 2x). So if we have a 640x480 resource 
and we cram it into a 320px-wide box on our layout, 
it has a density of 640 + 320 = 2x. 

We can only know an image’s density when we 
know its layout dimensions. And we can only know 
an image’s layout dimensions when they are fixed. 

If an image is fluid and styled relative to its container 
(with, say, a max-width: 100% rule), simple 1x / 2x 
descriptors won’t suffice. 


W DESCRIPTORS 
This brings us back to our example. The illustrations 
on our detail pages are fluid. Once the viewport 
shrinks below 640px wide, they scale down along with 
it. We deal with this variability using new markup 
to split image density into its two component parts: 
resource width and layout width. 

We tell the browser the width of our resources 
using the w descriptor. And we’ll specify the img’s 
layout width using the sizes attribute. 


<img src="medium.jpg" 
srcset="small.jpg 320w, 
medium.jpg 640w, 
large.jpg 1280w" 
sizes="100vw" 
alt="A woodpecker with a man's head" /> 


w descriptors are easy. How wide is the resource? 
Put a w after that number and you’re done. ‘small. 
jpg’ is 320x431, so we mark it up as 320w; ‘medium. 
jpg’ is 640x862, so it gets a 640w, and so on. 


SIZES 

sizes answers a different question: how wide will 
the image be on the layout? sizes takes CSS lengths, 
like 10em, 500px, or (if you fancy) calc(80vw - 30px) . 
In the previous example, I’ve used a sizes value of 
100vw , stating that the image will occupy 100 per 
cent of the width of the viewport. 

What do browsers do, upon encountering this 
markup? They convert the sizes value to CSS px and 
work out the image density of each resource in the 
srcset accordingly. On a 320px-wide viewport, our 
640w source would have an image density of 640w + 
320px = 2x. But on a 480px-wide viewport, that same 
image would only have 640w + 480px = 1.333x. 

Browsers determine these image densities on the 
fly. And then they do something wonderful: they pick 
whichever resource they want to! Usually 1x screens 
will get something like a 1x resource and 2x screens 


will get something bigger. But browsers are not bound 
by any particular picking logic. If a browser knows it’s 
running on a slow connection, or perhaps if a larger- 
than-necessary resource is already in the cache, that 
browser is free to choose a different resource than it 
might have otherwise. 

Back to our example. 100vw doesn’t quite capture 
the dynamic width of the illustrations on our detail 
pages. They have a width of 100% , but the figures 
that house them have a max-width of 640px . How 
do we tell the browser that? 

sizes lets us supply multiple values in a comma- 
separated list and tell the browser which length to 
use, based on media conditions. If the layout width 
of our image changes once the viewport reaches 
a certain size, we can encode that information in 
sizes , like so: 


<img src="medium.jpg" 
srcset="small.jpg 320w, 
medium.jpg 640w, 
large.jpg 1280w" 
sizes="(min-width 640px) 640px, 100vw" 
alt="A woodpecker with a man's head" /> 


Sizes lets us supply 


multiple values in a list 
and tell the browser 


which length to use 


This says: if the viewport is at least 640px wide, the 
image will be 640px wide. If it’s not, the image will 
be 100vw wide. Our sizes now conveys our image’s 
dynamic layout width exactly. 


PROGRESSIVE ENHANCEMENT 
And with that, we’ve marked up all our images so 
they’ ll scale efficiently in response to both variable 
screen densities and their own dynamic layout 
widths. There is, however, another dimension that 
we can adapt across: format support. 

Let’s say we want our images - currently trapped 
within jarringly bright white boxes — to appear 
as if they’ve been drawn directly onto the pages’ 
paper backgrounds. To achieve that effect, we 
need to encode them with a format that supports 
transparency. 

PNG does, but it isn’t very good at compressing 
images with a lot of texture and subtle gradations 
- if we used PNG, the file-sizes would be prohibitively 
large. What’s a modern web developer to do? I’ll tell 
you what: progressively enhance! 
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Google’s WebP format compresses our images well 
and supports transparency, but it’s only supported in 
Blink-based browsers like Chrome. That’s OK by us. 
We’ll use new another new markup pattern (borrowed 
from <audio> and <video> ) to send WebPs to browsers 
that support them, and JPGs to everyone else: 


<picture> 
<source type="image/webp" 
srcset="small.webp 320w, 
medium.webp 640w, 
large.webp 1280w" 
sizes="(min-width 640px) 640px, 100vw" /> 
<img src="Medium.jpg" 
srcset="small.jpg 320w, 
medium.jpg 640w, 
large.jpg 1280w" 
sizes="(min-width 640px) 640px, 100vw" 
alt="A woodpecker with a man's head" /> 


</picture> 


Browsers send the srcset of the first <source> whose 
type they support to the <img>. Thus, the (required) 
<img> is still the thing that we see on the page. 
We’re progressively enhancing it by wrapping it 
within a <picture> . 


RESPONSIVE RESULTS 

Our images now adapt across three dimensions: 
screen density, viewport width and format support. 
We’ve broken the tyranny of the single src in order 
to mark up images that are as responsive as the pages 
that house them, taking advantage of high-resolution 
screens and cutting-edge formats without sacrificing 
performance for those less capable. Huzzah! 
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ICON FONTS 


Seren Davies outlines the problems icon 


fonts can cause for accessibility 


S Do you use icon fonts on your site? Are you 
aware these cause problems for some of your 
visitors? Well, I’d like to tell you about these visitors 
and some of the challenges they face with icon 
fonts, and suggest an alternative that benefits 
them and many others. 

According to the NHS, roughly 10 per cent of the 
UK population has some form of dyslexia. Dyslexia 
is avery broad term, and affects people in a number 
of different ways. It can cause sufferers to have 
trouble reading, but it can also affect writing, 
spelling and even speaking. Some people suffer only 
mildly, while others have more severe symptoms. 


DISTINGUISHING CHARACTERS 

Iam part of that 10 per cent, and use various 
strategies to help with my spelling and reading. 
One strategy is to change my browser font to 
OpenDyslexic using Chrome’s Font Changer (netm. 
ag/changer-273). OpenDyslexic is weighted to make 
it easier to distinguish similar characters from 
one other. This weighting also helps dyslexics who 
experience inverted letters or ‘flipping’. 


Overriding a page’s font produces problems 
on some sites. I’m often greeted by empty squares 
instead of icons because there’s no equivalent glyph 
in OpenDyslexic. GitHub is a case in point. 

Icon fonts don’t only have a negative impact on 
people with accessibility needs: Opera Mini’s 250 
million users won’t see them. Plus, as Etsy found, 
even in mainstream browsers things occasionally 
go wrong - last year, iOS Safari couldn’t find the 
relevant glyph for the half-star in Etsy’s reviews, 
so it substituted in a horse. 

Some suggest font ligatures and/or ARIA roles 
can make icon fonts more accessible. While they 
may help people who use screen readers, they don’t 
really help people like me. Using a ligature (such as 
an icon of a house for the word home) might enable 
a screen reader to say something meaningful, but 
it will probably alter the page layout and force 
users to read a word instead of recognising an icon, 
generally making life harder for dyslexics. 


SUBSTITUTING SVG 

Given these issues, should we really be using a font 
for icons when SVG images will give visitors a better 
experience? There are several ways to use SVG 
images: <img> element, CSS background image and 
the inline SVG element to name three. This perhaps 
makes them more confusing at first, but they offer 
the same benefits as icon fonts, and more. 

Just like icon fonts, SVG images scale, are pixel- 
density independent, and when used inline can 
be styled using external CSS. Unlike icon fonts, 
they support multiple colours, animation and the 

<title> and <desc> attributes, helping make them 
accessible for screen readers too. Perhaps most 
important to dyslexic users like me is that we 
actually get to see the icon when the font fails to 
download or we override the default font. 

We can use the <symbol> and <use> elements to 
build reusable icon systems. Sara Soueidan (netm.ag/ 
soueidan-273) and Chris Coyier (netm.ag/coyier-273) 
have written about this in more detail and it’s well 
worth reading their articles. 

Some older browsers don’t support SVG so will 
need a fallback. A good option for this is Grunticon 
from the Filament Group, which creates PNG images 
for those browsers that don’t support SVG. 

Next time you’re considering using icon fonts 
think about how visitors will be affected by your 
choice. Maybe SVG might give them a better 
experience instead. B 


Seren (@ninjanails) is studying software engineering at Oxford 
Brookes, and currently on a placement at Incuna. She's a dyslexic 
who's passionate about accessibility and also enjoys nail art 


net november 2015 103 


ABOUT THE AUTHOR 
RICHARD BURTON 


w: rb.cm 
t: @ricburton 
job: Designer 


areas of expertise: 
Sketch, Framer, Xcode 


q: what did you want to 
be when you grew up? 

a: | hoped | could fund my 
addiction to kitesurfing by 
tapping on a laptop near 
the sea 


(>) VIDEO 


Richard Burton has 
created an exclusive 
screencast to go with 
this tutorial. Watch 
along at netm.ag/ 
pluginvid-273 
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CUSTOMISE SKETCH 
WITH PLUGINS 


Plugins enable you to personalise Sketch. Richard Burton 
explains how to find, download, use and create them 


& One of the things that makes Sketch such 

a powerful design tool is that it’s scriptable. 
The team at Bohemian Coding - the people behind 
Sketch - enable users to customise the app with 
plugins, so they can focus on a core set of features 
that will be useful to everyone. 

If you haven’t touched the plugins drop-down 
in the menu bar before, my hope is that this article 
will encourage you to try some out. If you have a few 
plugins installed and have thought about making 
one of your own, you can skip to the end to learn 
how to start hacking away. 

A plugin contains one or more files written in 
CocoaScript, which is a variation of JavaScript that 
can interact with the Sketch Mac app. These scripts 
can access and manipulate all the layers, shapes, 
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text and artboards in your Sketch file. They can 
also reach the app’s internals and the operating 
system’s frameworks. 

This allows you to write a range of plugins, from 
simple ones that can (for example) move shapes 
100 points at a time, to more complex ones that 
transfer designs to collaboration tools like Zeplin, 
Relay or InVision. 

The Sketch plugin directory (netm.ag/directory-273) 
is a central repository that links to lots of other 
plugins hosted on GitHub. When someone wants to 
share their plugin with the world, they can submit a 
pull request and Ale Munoz, a developer at Bohemian 
Coding, will check it over and add it to the directory. 
The team behind Sketch have also curated a list of 
great plugins, which you’ll find at netm.ag/BC-273. 


INSTALLING PLUGINS 
Individual plugins are bundled up into files that 
have the extension “sketchplugin’. To install them, 
simply double-click on the file and it will be moved 
into the plugins folder. You can find this folder by 
going to Plugins > Manage plugins ... > [gear icon] > Show 
plugins Folder . 

Some of the projects you’ll find on GitHub 
will actually be collections of plugins within a 
folder — for example Sketch Commands (netm.ag/ 
commands-273). In this, there are lots of plugins 
divided into folders based on the kind of operations 
they perform. These various plugins help you quickly 
do things like capitalise a text layer or increase 
a shape layer’s width by 100 points at a time. For 
collections of plugins, you’ll need to download 
the zipped folder from GitHub, find your plugins 
folder, and drag the unzipped folder in there. 

Sketch Beta and the main Sketch app each have 
their own plugins folder, so you’ll need to copy the 


Free Mac app Sketch 
Toolbox makes it easy 
to download and install 
new plugins 


plugins and collections to both places. This is a bit 
of a pain, which is why Sketch Toolbox (sketchtoolbox. 
com) was created. This is a free Mac app that makes 
it easy to download and install new plugins. 

Before it was built, users had to download the 
scripts from GitHub and install them themselves. 
If you were running the beta version of Sketch 
alongside the normal release, you’d have to make 
sure the plugin was installed in both places. Now 
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you can simply search for a plugin from Sketch 
Toolbox and hit ‘Install’. 

The latest version of Sketch has a full plugin 
manager built right into the app. You can find this 
at Plugins > Manage Plugins... . If you click on ‘Get 
plugins ...’ in the plugin manager you’ll be taken 
to Bohemian Coding’s plugin directory. 


OTHER PLUGIN SOURCES 

Nearly all the most popular plugins are listed in the 
plugin directory. However, not all developers submit 
their work to the directory after publishing them on 
GitHub, so it doesn’t contain everything. If you can’t 
find what you’re looking for in the directory, there 
are a few other things you can try: 


@ Google ‘[what you want the plugin to do] + Sketch 
plugin. This will often turn up something useful 

@ Ping Ale Munoz on Twitter (@bomberstudios). 
He’s really great about letting you know if there’s 
something that fits your needs, and sometimes 
he’ll even make you a custom plugin 

® Go to netm.ag/request-273, and suggest your 
plugin idea 

@ Visit sketchappsources.com/plugins.html, 
awesome-sket.ch or sketch.land. These sites all 
list useful plugins and highlight new ones 


CREATE YOUR OWN 
If there’s something you want Sketch to do and 
you can’t find a plugin that does it, I’d encourage 
you to dive in and try and hack something together. 
If you’ve found a plugin that does something similar 
to what you’re after, it can be much quicker to use 
that code as a starting point for your idea. 

For example, when I wanted to make a plugin 
that moved a selection of layers 100 points at a time, 
I looked at the code of plugins that were moving 
layers in different ways, and re-purposed it. 


Sketch Toolbox This free, 
community-made app 
makes dowloading and 
installing new plugins easy 
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FOCUS ON 


REALLY USEFUL PLUGINS 


+ These are three of my favourite plugins. | use them all 
the time to help me with my work. 


Toggle Locked Layers 


github.com/ribot/sketch-toggle-locked-layers 


With this plugin installed, | use the keyboard shortcut ‘ctrl+cmd+L’ 
to quickly unlock all the locked layers within an artboard, tweak 
something, and then lock them back up. It’s a lot quicker than 
scrolling through the layer list, guessing which layer you want, 
and unlocking them one by one until you find the right one. 


Relabel Button 

github.com/kenmoore/sketch-relabel-button 

This is a fantastic tool for quickly changing the size of a button 
based on the length of the text it contains. It treats a text layer and 
a rectangle within a group as a button. To change the label, just 
select the group and hit ‘cmd+K’, which will bring up a prompt to 
change the text. It’ll then resize the rectangle based on that input. 


Data Populator 

github.com/preciousforever/sketch-data-populator 

Whenever you're designing an interface with text and images, 

it can be hard to account for the variable length of different data 
types. For example, email addresses and names can range from 
two to 50-plus characters. This plugin allows you to import data 
from a JSON file on your machine and update the text and images 
in your design to see how it looks. With plugins like this, it won't 
be long before you'll be able design against a live API instead 

of an arbitrary set of dummy data. If this interests you, | highly 
recommend checking out netm.ag/bridge-273. 


eneral Canvas Layers Plugins 
Plugins are created by third-party developers to customize Sketch 


Sketch Data Populator 1.0 


Y Say goodbye to Lorem ipsum: populate your Sketch documents with 
meaningtul data 


Sketchy Pies 


Draw ple charts 


. User Flows 


“ Generate user-fiow diagrams from artboards in Sketch 


Managing plugins The new plugin manager in Sketch 
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To start writing your own plugin, click on Plugins 
> Custom Plugin... or hit ‘ctrl+Shift+K’ to bring up 
the custom plugin editor. In here you’ll see some 
example code written in CocoaScript: 


log('This is an example Sketch script.’); 


var documentName = context.document.displayName(); 
log('The current document is named: ' + documentName); 


var selectedLayers = context.selection; 
var selectedCount = selectedLayers.count(); 


if (selectedCount == 0) { 
log('No layers are selected.’); 
}else { 
log('Selected layers:’); 
for (var i = 0; i < selectedCount; i++) { 
var layer = selectedLayers[i]; 
log((i+1) + '.' + layer.name()); 
} 
}; 


If you hit Escape, the custom plugin editor will 
slide upwards and away. Quickly select a few layers, 
hit ‘Ctrl+Shift+K’ again to bring it back, then hit 
Run once again. 

Your output should look something like this: 


This is an example Sketch script. 
The current document is named: Untitled 
Selected layers: 


. Rectangle 1 
. Rectangle 2 
. Rectangle 3 


Bl/wi)nNn|a 


. Rectangle 4 


Script executed in 0.007364s 


Let’s unpack this a bit by looking how the plugin is 
functioning. The purpose of this plugin is to output a 
list of the layer names to the console. The first three 
lines of code output some basic text and show you 
how the context variable contains the document’s 
name. The if statements checks context.selection — 
which is defined above as the selectedLayers variable 
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Plugin editor The custom plugin editor and console that is included with Sketch 


— to see if it’s empty. If it’s not, the script will iterate 
over all of the layers in the selection and log their 
names in the console. 

It’s surprising how much you can do with just a 
few lines of code. Let’s start off by looking at a tiny 
plugin I wrote to remove the shadows from any 
layers I’ve selected using a keyboard shortcut: 


//Disable Shadow (control option s) 

var selection = context.selection 

for (var i = 0; i < [selection count]; i++) { 
var layer = [[selection objectAtIndex:i] style] 
[[layer shadow] setlsEnabled:0] 

i 


The first line is a comment with a purpose: it defines 
the combination of keys that will activate the plugin. 
The code loops over all of the currently selected 
layers, finds the shadows for each layer, and then 
removes them. 

Try pasting this code into your custom plugin 
editor and then hitting ‘Save...’. You can name the 
script and it will be saved to your plugin folder. 

Once there, you can open it up with your favourite 
text editor. 


LEARN MORE 

There are lots of great resources out there to help 
you learn how to make your own Sketch plugins. 
I highly recommend the following places: 


@ The developer section of Bohemian Coding’s site 
(netm.ag/dev-273) 

@ Andrey Shakhmin’s Sketch Plugins Cookbook 
(netm.ag/cookbook-273) — An introduction to plugin 
development from one of the most prolific plugin 
creators in the community 

@ The Sketch plugins developer mailing list 
(sketchplugins.com) 

@ Plugin snippets for plugin developers (netm.ag/ 
advanced-273) - A more advanced post with useful, 
frequently used snippets of code for plugins 


CONCLUSION 

Sketch is a great tool to help you get ideas out of your 
head and onto a screen, but it can’t do everything. 
Plugins are a way to bridge that gap and let you shape 
the tool you use to get your work done. 

Although the limiting factor for great work is 
never how quickly you can design, there are always 
time constraints for important projects. The goal 
here is to make your iteration process faster so you 
can experiment with more ideas. 

My hope is that the next time you find yourself 
doing something repeatedly that doesn’t seem 
necessary, you’ll search for a plugin and play around 
with it, and find a simpler way to achieve your task. 
If you don’t find one that fits your needs, it’d be great 
if you have a go at building your own plugin. If you 
do, please share it with me on Twitter @ricburton 
— it'll make my day! 8 


Alot is a collection of 
plugins Richard Burton 
has written for himself, 
which he uses hundreds 
of times a week: github. 
com/ricburton/alot 
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q: what did you want to 
be when you grew up? 
a: Sherlock Holmes. 
Being a detective 
sounded amazing 
when | was eight, 

plus there is the hat 


[>] VIDEO 


Caner Uguz has created 
an exclusive screencast 
to go with this tutorial. 
Watch along at netm.ag/ 
chromevid-273 
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LIVE-CODE SITES WITH 
CHROME DEV TOOLS 


Caner Uguz shows you how to use Chrome Developer Tools’ 
CSS and HTML features to try out layout possibilities 


You have been there before. After several long 

days of work, you are sitting with a customer 
and he is pointing to the colour of the border and 
asking you if it could be a shade darker, or maybe 
a little more blue? You take your vague instructions 
and go back to the drawing board. Or maybe you are 
a frontend developer and the layout of the page does 
not look quite right with the actual live data you are 
viewing. How will you know where the problem is? 
Maybe you will go back to the code, make changes, 
save, refresh the page, upload to your test server 
and test it with that data again. 

What you need is a CSS and HTML editing tool 
that gives you immediate previews and works right 
in the browser environment. Chrome provides a 
large number of tools for developers, and some 
of them are designed to address design-related 
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issues such as these. In this tutorial we’ll go 
over some of the features of this set of amazingly 
helpful tools. 

To use the Chrome Developer Tools, open 
your website in a Chrome browser and click the 
hamburger menu icon in the top right. Chrome 
hides this feature under More Tools > Developer Tools . 
Clicking this will open a panel on the side or bottom 
of your window. You can also use alt+cmd+! to open it, 
or right-click on any element on the page and select 
‘Inspect Element’ from the menu. 

When you open the Dev Tools for the first time 
it may look crowded, but we’re going to work with 
a few specific panes. The HTML pane includes the 
HTML source code. You can edit, move and remove 
HTML elements directly in this pane. The style pane 
includes all the style-related information. 
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Colour picker Move your mouse outside the colour picker to match 
any shade on the page 


EDITING STYLES 
The style pane includes all CSS styles that apply to 
the element that is currently selected. If you opened 
the Dev Tools by right-clicking the element, that 
element will be selected. If you opened it using 
another method, the body tag will be selected. 
Here you can see what styles have been applied 
to your element from anywhere that has influence 
on the element. Take a look at the style rules listed 
(scroll all the way down). Here you will observe a 
few important points. 


Order of application 

The style rules you are looking at are ordered based 
on the specificity of these styles. This is immensely 
useful because you can see which rules override the 
others. In most troubleshooting cases, if your style 
is not being applied you need to look here to see if 
it’s being overridden by another rule. 


Colour picker 

Whenever a colour is involved, the style pane 

will show a small box with that colour. Click 

the box to open the colour picker, which you 

can also use to adjust opacity. For extra wow- 
factor, move your mouse outside the colour picker. 
You will see that your pointer is able to select 

any colour within the browser, making it easy 

to match colours in your design. 


FOCUS ON 


WORKSPACES 


In general, the changes you make to the CSS and HTML files 

are not saved to your actual development environment files. 
It is however very possible with Dev Tools to map these changes 
directly to the files you actually work with. This way, you don’t need 
to mess around trying things out in Dev Tools and then going to 
your text editor to make the changes. 

To achieve this, you need to add the files you're changing to the 
workspace before you make your edits (one reason is that Chrome 
will ask you to restart your Dev Tools). When you click the Sources 
tab in Dev Tools you will see a list showing your folder structure 
on the right. To add a file to your workspace simply right-click and 
select ‘Map to File System Resource’. 

After you add files or folders, you will notice that you can directly 
edit files and save. This time when you refresh the page, your 
changes will persist because you have in fact saved the style and 
HTML changes to your development files. 

Many web designers and developers now use CSS preprocessors 


like Sass or Less. Luckily Dev Tools support mapping to these 


files as well, So you can continue to make direct edits if you use 
preprocessors. You can learn more at netm.ag/preprocessor-273. 


Using Sass with CSS source maps 


CSS preprocessor support 


Sass, Less and Stylus Thankfully, Chrome’s Developer Tools will still work 
if you're using a preprocessor 
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IN-DEPTH 


FURTHER READING 


+ Here are some resources that will set you on the path to 
becoming a Dev Tools expert. 


Code School 

codeschool.com/courses/discover-devtools 

If you want to learn more about the topics covered here and get 
more serious about Dev Tools by exploring other features, try out 
the free course from Code School. It contains videos that are easy 
to follow and separated into different features. The first course is 
Elements, which will refresh a lot of the material covered in this 
tutorial. For designers the chapters on Elements and Sources might 
be all you need, but if you do some JavaScript you should take a 
look at the Console and Debugging chapters as well. The rest of 
the chapters are for more advanced users who run and maintain 
frontend applications. 


Chrome Official Documentation 

developer.chrome.com/devtools 

Dev Tools provide an amazing array of useful features and 

there is no better place to check the details than the official 

docs on Chrome. This is a free resource that includes details 

about functionality, shortcuts and many screenshots. One of the 
downsides is that this isn't designed to be a step-by-step teaching 
resource. However, it’s a good source of detailed information that 
you can use alongside this tutorial and other resources. 


Advanced Technical Information 

If you are interested in more code-related aspects of the Dev Tools 
and have some time to kick back and watch some video sessions 
there are a few that should be on your list: 


@ Secrets of The Chrome Developer Tools (vimeo.com/53073654) 
— A 40-minute overview and talk about lesser-known features 
@ Wait, Chrome Dev Tools Could do That? (netm.ag/wait-273) — This 
video is a great advanced course for frontend developers. It talks 
about analysing the performance of your website 


@ Chrome Dev Tools Revolutions 2013 (netm.ag/revolution-273) 


— In this official Google I/O conference session, Paul Irish 
goes through some features of Dev Tools, including Sass 
preprocessing, workspaces and other titbits 
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Style rules You can see all the applied styles and edit them directly in 
your browser 


Enable/disable 

As you hover over rule sets you will see that Chrome 
shows checkboxes next to the styles. It is possible to 
click on these to enable or disable the styles. You’ ll 
find this is much easier than removing a style and 
then trying to remember what it was when you want 
to enable it again. 


Edit styles in place 
Dev Tools has in-place editing, which means you can 
click on any rule and it will turn into a box with the 


contents highlighted. You can then edit any part. 
As soon as you make a change to a number or rule, 
the results will be shown on the page. 


Add new rules 

You can create new rule sets by clicking on the 
‘plus’ (+) icon in the top-left of the styles pane. 
This will create a new rule set with as specific 
a selector as possible. You can then add rules or 
change the selector itself. 


Map to source 

For each rule set you will see a file name in the 
top-right corner (e.g. ‘base.css’). This tells you where 
that rule is originally defined so you know where to 
make your changes. These file names are links that 
will take you to the file itself within the Dev Tools, 
where you can edit the rules. 


These tools provide great insights and information, 
but you are really here to edit these styles and see 
your changes live. There are several ways you can 
do that. 


The box model 

When you open the styles pane you will see the 
element represented with a box that has margin, 
border and padding information displayed for all 
sides. You can check this visual representation to 
make sure your spacing is accurate, and even double- 
click to change those values in place. 


Show inherited properties 

Just below the box model visualisation you will 

see a section that lists all calculated rules for 

that element. Click on the checkbox titled ‘Show 
Inherited Properties’ to make the style pane show 
rules that are not set but inherited from the defaults. 
This may be vital to understand where your element 
is actually taking its values from. 


EDITING HTML 

So far we only looked at the style pane. However 
the HTML pane is not just the static source code. It 
is in fact editable in place, just like the style rules. 
Sometimes adding or changing CSS is not enough 
and you need to change the layout structure of the 
page or add class names to certain elements. There 
are several handy alterations you can make to 
existing elements on the page. 


Select elements 

You can click through the structure of the HTML 
code to open and select elements, but the faster 
method is to click on the magnifying glass icon in 
the top-left to turn on inspect mode. You can then 
hover over elements to highlight them, then click 
on them and they will show up in the HTML pane. 


JavaScript 


Bring Bootstrap's components to life with 
over a dozen custom jQuery plugins. Easily 
include them all, or one by one. 


Overview 


Device Emulation There are tools that enable you to experience your 
design through the viewport of a mobile device 
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Force element state With the HTML pane you can force states such as hover or active. Simply right-click 


an element and select ‘Force Element State’ 


Move or delete elements 

You can drag and drop any of the elements into any 
other position on the page. To remove an element, 
simply select it and hit the Delete key, or right-click 
and select Delete. If you delete something by mistake 
you can undo with standard undo commands. 


Edit HTML 

If you have a large number of edits to do on an 
element’s HTML code, you can simply right-click on 
the element in the HTML pane and select ‘Edit as 
HTML. This will give you complete freedom on how 
to alter the HTML. 


Force states 

Perhaps one of the most useful features of the HTML 
and style panes is that you can force states such as 
hover or active. This makes sense because hover 
styles, for instance, won’t appear in the style section 
unless the element is forced to that state. 

In the HTML pane, right-click an element and 
select ‘Force Element State’. An orange dot on the 
left will indicate that it’s showing a state, and the 
style rules will update to show the pertinent rules 
for that status. 


EMULATING MOBILE DEVICES 

Until a short time ago, you could work with your 
CSS/HTML and call it a day, but with the proliferation 

of different device types available to your audience, 

you need to make sure your website can be viewed > 
everywhere. I don’t have space to go into depth on 
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[>] VIDEO 


Chrome Dev Tools’ 
device mode has more 
features than we 
could cover here. 

This five-minute video 
from Google gets into 
some of the details: 
netm.ag/device-273 
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HTML PANE 


<a href="#exomples">Examples</a> 
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Styles Event Listeners DOM Breakpoints Properties JQuery Audit 


element.style { +, (>) 
} 
.bs-docs-sidebar .nav>lira { docs.min.css:6 


display: block; 

padding: 4px 2px; 

font-size: 13px; 

font-weight: 500; 

color: M#767676; 
} 


-Mavelira { Strap. min. Css: 
position: relative; 


Chrome Dev Tools Here you can see the main panes that allow you to edit HT 


mobile-ready websites here, but your friendly Dev 
Tools has a cool tool that will help you test your 
website for the majority of these cases. 


Device mode 

To the left of the ‘Elements’ tab at the top of the 
Dev Tools menu, there is an inconspicuous icon 
that shows a mobile phone. If you click it you will 
see your regular website view has transformed 
into a much smaller view (you may need to refresh 
for this change to take effect). You are now in the 
device mode. 

From the device selector at the top of you can 
change which device is being emulated. You can also 
switch orientation from the device menu, or enter 
custom sizes. One of the important considerations 
here is that your window width should be adjusted 
to reflect the device, which immediately gives you 
clues about your responsive styles. 

You might be thinking that simply making your 
browser window narrower could also have this 
effect, but device mode does a few more things as 
well. Here, user agent information and pixel density 
changes to reflect the device being emulated. Your 
hover effects will stop working, since mobile device 
inputs don’t have hover. 

You will however have touch action emulations 
and mobile scroll bars. All these will help you edit 
your CSS or add conditional CSS that is appropriate 
for mobile devices. The best part is that you don’t 
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Lelements and CSS styles 


need to borrow a bunch of phones and tablets from 
friends to do it! 


CONCLUSION 

We’ve only looked at two panes so far, and we have 
already covered a lot of features of the Chrome Dev 
Tools. I’m sure you are thinking of times in the past 
you could have used these techniques, or considering 
their potential for future projects. I recommend 
using these tools daily to save time and try out 

ideas before committing to writing any code. 

There are two approaches you can take which will 
help you improve how you work with these tools. If 
you are starting a new project, code the HTML first 
and then simply play with the rules and first draft 
of the HTML through the Dev Tools. You will see 
that the instant application of your changes will 
save a lot of time as you refine your project. 

Conversely, if you are fixing something or making 
edits on an existing project, before you go through 
the code look at the styles being applied and the 
HTML syntax and see if you can troubleshoot on 
Dev Tools first. Then try out your initial instincts 
for possible solutions. You will find that most often 
this will lead you to the correct fixes. 

One final thing: you can quite easily prank your 
friends with screenshots from reputable online 
resources. I’ll leave it to you to figure out how the 
Dev Tools can serve this fun purpose; but please 
use responsibly. BY 
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ACCESSIBILITY CHAMPION 


Jamie Knight debunks the myth that accessibility is a dark art, 
and shows you how you can build it into your projects 


Accessibility has a reputation for being a 

black art that’s best left to specialists. Large 
documents like the WCAG don’t tend to dispel this 
myth. Additionally, for those who don’t know the 
‘right’ language to use when discussing impairments 
and disability, talking to users can be awkward and 
intimidating. 

This leads to the belief that accessibility is 
somewhat unknowable. However, what if the black 
magic is not real? Can we get ‘most of the way, 
most of the time’ ourselves? In a nutshell: yes 
and yes. Here’s how we are attempting to do just 
that at BBC Digital. 


ENTER THE CHAMPIONS 
Setting aside this notion of magic, there are three 
main areas in which audits do fall down. They are 
too late in the process, too slow to make a difference 
and undertaken by those too distant to have empathy 
with the product team. 

In our experience, making many small tweaks 
from within the team along the way results in 
a better outcome than one big push at the end from 
outside. To do this, we focus our time on adding more 
small touches, and ensuring each small touch is as 
good as it can be. 
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We recruit from within product teams, asking 
them to identify a number of champions across 
different roles. We have designers, developers, 
product owners, testers and editorial all acting as 
accessibility champions. We train the champions 
and provide them with tooling and resources so 
they can better understand accessibility. Finally, 
we network the champions together with events, 
meets and group communications. This helps build 
contact and peer support. 

Unlike audits, champions start early and act 
often. From the start of the project to the end, there 
are champions involved. The small touches could 
be asking a question at the daily standup, or adding 
a scenario on some requirements. Champions are 
also timely. They are embedded in the team and 
focused on the project, so they can answer common 
questions quickly. A chat across the desks can 
replace a long and complicated email chain. 

Finally, champions are part of the project. 

They have empathy. They are the implementors 
and so they have the best understanding of the 
project and its goals. The champion model is 
refocusing accessibility on making the ‘doing’ 
better, rather than marking what has already 
been ‘done’. 


Jamie (@JamieKnight) is a senior accessibility specialist at BBC 
Future Media, and former frontend lead for iPlayer Radio. He is 
slightly autistic and has a plushie companion called Lion 


T | t? ® www.catalyst2.com 
Cd OC YS @%@ 0800 107 7979 
managed hosting 


Providing helpful, reliable, hassle free hosting for 15 years 


‘t have to 


We do all the server management so you don 


Our Managed Hosting is... 


———— UK based (support and servers) 
* Value for money 
A worry free service 


+—* Reliable and Stable 
- 99.97% uptime since May 2007 


of our 

customers 
rate us good, 
very good or & 
excellent 


Try us today. 
30 day no quibble money back guarantee. 


%@ 0800 107 7979 [@4 info@catalyst2.com 
Sign up today and get 10% off any package using the code NETMAG 


PROJECTS 


Supercharge your 
SVG animations 


Automate your 
production testing 


Customise Sketch 
with plugins 


Bring your projects to life with Shutterstock’s diverse library 
of over 60 million images, videos, and audio tracks. Flexible 
monthly payment options, innovative search tools, and 

no daily download limits make creating even easier. 


yy fm 4 


shutterstsck: 


